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。例如......

[“杯子”，“球”，“玩具”]

呈现为....

cupballtoy

但我试图让它看起来像：

杯
球
玩具

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

Answer 1

您可以使用嵌套地图功能。

 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>
    );
 });

Answer 2

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

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

如何在返回时一次渲染出我的数组中的项目？

2 个答案: