反应循环数组和渲染对象

Question

我正在尝试使用 React 中的 map 函数循环数组。

当我这样做时：

render() {
    return (
      <div>
        {this.props.components.map((vitamin) => {
         <p>{vitamin.ID}</p>
       })}
     </div>
   )
}

什么都没有被渲染。但是，如果我尝试在 map 函数中使用 console.log，对象键如下：

render() {
    return (
      <div>
        {this.props.components.map((vitamin) => {
         console.log(vitamin.ID)
       })}
     </div>
   )
}

维生素 ID 打印在控制台中。所以我知道有一个对象，但是为什么它没有出现在我的 React 组件中？

Answer 1

您必须在地图的每次迭代中返回组件/对象：

render() {
    return (
      <div>
        {this.props.components.map((vitamin) => {
         return(
           <p>{vitamin.ID}</p>
         )
       })}
     </div>
   )
}