在 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>
    )
}

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>
    );
  }
}