如何通过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>