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

【问题标题】：How to set two loops in React JS如何在 React JS 中设置两个循环
【发布时间】：2016-11-16 11:35:48
【问题描述】：

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

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

我曾尝试从 forEach 开始，然后是 .maps。又失败了。

【问题讨论】：

forEach 什么也不返回。所以你最终会得到一个充满未定义的数组。
尝试在第一个=>之后删除花括号
应该是“.map”而不是“.maps”

标签： javascript loops reactjs

【解决方案1】：

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

此外，您需要将key 属性添加到您的<ReportAlarmRow> 组件中。

“键”是创建元素列表时需要包含的特殊字符串属性。

键帮助 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>
  }
}

【讨论】：

【解决方案2】：

试试这样的

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

【讨论】：

我试过这种方式，但它返回 .map 不是函数。 :(
你应该用你自己的渲染方法替换<Render Method>。而且我还没有尝试运行它，但应该给你图片。尝试添加正确的返回语句并调试，它应该可以工作。

【解决方案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>
     )
}

【讨论】：