在 React 中使用地图渲染元素

Question

我有一个名为 brands 的变量，它是一个列表。在 return 下 render 下，当我尝试映射列表并创建新的段落标记时，出现此错误： Expected to return a value in arrow function array-callback-return 。

 var brands = [];

componentDidMount(){
    database.ref("/brands/").on('child_added', (snapshot)=>{
        var data = snapshot.val();
        console.log(data);
        brands.push(data);
    })
}

render(){
    return(
        <div>
            {brands.map((brand)=>{
                <p>{brand}</p>
            }
            )}
        </div>
    )
}

原文由 Vedant 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 return 语句添加到您的箭头函数，它将按预期工作：

 render() {
  return(
     <div>
       {brands.map((brand) => {
         return <p>{brand}</p>;
       })}
     </div>
   )
}

您还可以将 {} 更改为 () 以获得隐式返回：

 render() {
  return(
    <div>
      {brands.map((brand) => (
        <p>{brand}</p>
      ))}
    </div>
  )
}

您还必须将 brands 置于状态中，以便组件将在 brands 更新时重新呈现。确保不要推送到数组，因为这会改变它。

例子

class App extends React.Component {
  state = { brands: [] };

  componentDidMount() {
    database.ref("/brands/").on("child_added", snapshot => {
      var data = snapshot.val();
      this.setState(previousState => {
        return { brands: [...previousState.brands, data] };
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.brands.map((brand, index) => (
          <p key={index}>{brand}</p>;
        ))}
      </div>
    );
  }
}

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我建议使用 function 和 return ，并使用 state 来存储你的 brands

 import _ from 'lodash';

constructor() {
   super();
   this.state = {
     brands: []
   }
}

componentDidMount(){
    let newData = [];
    database.ref("/brands/").on('child_added', (snapshot)=>{
        let data = snapshot.val();
        console.log(data);
        newData.push(data);
    });

    this.setState({
         brands: newData
    });
}

renderBrand = () => {
  return _.map(this.state.brands, (brand, i) => {
     return <p>{brand}</p>;
  });
}

render(){
    return(
        <div>
            { this.renderBrand() }
        </div>
    )
}

原文由 Donald Wu 发布，翻译遵循 CC BY-SA 4.0 许可协议