如何通過forEach循環將Map（）項目渲染到React jsx中？

Question

我有一個處於狀態的Map（）對象，該對象存儲了一些名稱和用於列表過濾器的選項。 但是我不能像這樣通過forEach在JSX中渲染Map項：

 <ul> { this.state.items.forEach((value, key) => ( <li>{value}</li> )) } </ul> 

顯然，沒有forEach我將無法訪問Map項，在這種情況下Array.map（）不可用。

解決此問題的最佳實踐是什么？ 我應該使用entry（），然后使用Array.map（），然后呈現列表？

謝謝

Answer 1

選項1： 如果無法使用map則使用變量

const elems = []
this.state.items.forEach((value, idx) => (
  elems.push(<li key={idx}>{value}</li>)
))

然后在渲染時

<ul>
  {elems}
</ul>

選項2： 如果可以使用map則只需內聯

<ul>
  {
    this.state.items.map((value, idx) => <li key={idx}>{value}</li>)
  }
</ul>