Question

我得到的数组中包含另一个数组。这是一个json。我正在尝试做两个循环，但没有成功。

{this.state.listOfAlarms && this.state.listOfAlarms.map((alarms) =>
    {alarms.report && alarms.report.forEach((alarm) =>
        <ReportAlarmRow alarm={alarms} alarmType={alarm}/>
    )}
)}

我曾尝试从forEach开始，然后执行.maps。再次失败。

Answer 1

尝试这样的事情

var Hello = React.createClass({
  render: function() {
    const something = [
      [
        1,
        2,
        3
      ],
      [
        4,
        5,
        6
      ]
    ]
    const JSXElem = something.map((elem) => {
      elem.map((nestedElem) => {
        // <Render Method>
      })
    })
    return <div>{JSXElem}</div>;
  }
});

Answer 2

为了便于阅读，您应该在return语句之前执行这些循环。

此外，您需要向key组件添加<ReportAlarmRow>属性。

A＆＃34; key＆＃34;是创建元素列表时需要包含的特殊字符串属性。

键帮助React识别哪些项目已更改，已添加或已删除。应该给出数组内部元素的键，以使元素具有稳定的标识。

Lists and Keys - React documentation

我使用key={alarm[i].id}设置了密钥，但我不知道alarm对象中有哪些属性。
请使用唯一的 int 值！

键必须在兄弟姐妹中唯一

试试这个

constructor(props) {
  super(props);
  // State
  this.state = {
    listOfAlarms: []
  }
}

render() {
  const reports = this.state.listOfAlarms.map((alarms) => {
    if (alarms.report) {
      return alarms.report.map((alarm) => 
        <ReportAlarmRow alarm={alarms} alarmType={alarm} key={alarm.id} />
      );
    }
  });

  return {
    <div>
      { reports.length ? reports : null }
    </div>
  }
}

Answer 3

你的意思是这样的

render(){
    let a = [ [1,2],[3,5],[7,8]];
    return(
       <div>
        {(()=>{
          let items = [];
          if(a){
            a.forEach((index,value)=>{
               value.forEach((i,item)=>{
                 items.push(<div key={ `${index}_${i}`}>item</div>)
               })
            })
          }
          return items;
        })()}
       </div>
     )
}

如何在React JS中设置两个循环

3 个答案: