我有一个处于状态的Map()对象,该对象存储了一些名称和用于列表过滤器的选项。但是我不能像这样通过forEach在JSX中渲染Map项:
<ul>
{
this.state.items.forEach((value, key) => (
<li>{value}</li>
))
}
</ul>
显然,没有forEach我将无法访问Map项,在这种情况下Array.map()不可用。
解决此问题的最佳实践是什么?我应该使用entry(),然后使用Array.map(),然后呈现列表?
谢谢
最佳答案
选项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>