React循環數組和rende對象

Question

我想用React中的map函數循環一個數組。

當我這樣做：

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

沒有被渲染。但如果我嘗試在地圖功能內的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> 
    ) 
}