如何在返回数组中的项目时一次呈现一个项目?

Question

>我有一个对象数组。

每个对象都有几个字符串和一个字符串数组。

我想用无序列表渲染对象的字符串数组部分。

现在我正在使用：

const renderOut = this.props.data.filter(obj => {
return this.state.keyToFind.includes(obj.name);
}).map((obj, idx) => {
return (
<div key={idx}>
<h2>{obj.name}</h2>
<ul>
<li>{obj.arrayItems}</li>
</ul>
</div>
);
});

上面代码的问题在于它一行渲染出 obj.arrayItems。 例如。。。

[ "杯子"、"球"、"玩具" ]

渲染为....

纸杯球玩具

但我试图让它看起来像：

• 杯子
• 球
• 玩具

有没有办法一次渲染一个obj.arrayItems？

Answer 1

是的，创建一个映射函数将字符串返回到 ul 内部的 DOM 元素中。 React 确实需要一个唯一的键 prop 来帮助跟踪这些组件，但为了简单起见，在这种情况下，您可以使用数组索引。

{ obj.arrayItems.map( (item, i) => <li key={i} >{ item }</li> ) }

Answer 2

您可以使用嵌套映射函数。

const renderOut = this.props.data.filter(obj => {
return this.state.keyToFind.includes(obj.name);
}).map((obj, idx) => {
return (
<div key={idx}>
<h2>{obj.name}</h2>
<ul>
{obj.arrayItems.map(item => <li key={item}>{item}</li>)}
</ul>
</div>
);
});