React - 組件不會在foreach循環中呈現？

Question

我有一個小應用程序，當你打開一個選項卡時，React Route將重定向到給定的組件（容器）。並從我想要呈現子組件的容器。我使用foreach循環遍歷一個需要給孩子的道具列表。但是，孩子沒有得到渲染。

我不想使用地圖，因爲我使用依賴列表類的庫。

render() { 
    return ( 
     <div> 
      {this.state.list.ForEach((element) => 
       <ChildComponent childName={element.name} 
     } 
     </div> 
    ); 
} 

}

Answer 1

你混淆了Array.forEach與Array.map。 forEach不會返回任何內容。正確的方法是：

<div> 
    {this.state.list.map((element, index) => 
     <ChildComponent key={index} childName={element.name} 
    } 
</div> 

map轉換給定的element到另一元件時，在此情況下的組件。調用map的結果是隨後呈現的組件數組。 forEach總是返回因此undefined代碼的結果是一樣的文字：

<div> 
    {undefined} 
</div> 

注意key呈現組件的列表時，也是必要的。