javascript - 如何通过 forEach 循环将 Map() 项渲染到 React jsx 中？

Question

我有一个处于状态的 Map() 对象，它存储了列表过滤器的一些名称和选项。但我无法像这样通过 forEach 在 JSX 中呈现 map 项:

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

显然我无法在没有 forEach 的情况下访问 Map 项，在这种情况下 Array.map() 不可用。

处理此问题的最佳做法是什么？我应该使用 entries() 然后使用 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>