如何在 ReactJS 中嵌套 3 个 map 循环函数

Question

我一直在研究但没有成功。我找到的答案解决了反应中的 2 个嵌套循环（使用地图），并且我已经有 2 个循环在工作。我的问题是我需要其中的 3 个，即使我一直在使用相同的结构，但在第三个上出现错误。

Json 看起来像这样：

    {
  "Table": [
    {
      "Power": "20HP",
      "Count": "5",
      "Vehicles": [
        {
          "Code": "T01-01",
          "Hours": [
            {
              "Hour": "5:00",
              "Status": "1"
            },
            {
              "Hour": "6:00",
              "Status": "2"
            }
          ]
        },
        {
          "Code": "T01-01",
          "Hours": [
            {
              "Hour": "5:00",
              "Status": "1"
            },
            {
              "Hour": "6:00",
              "Status": "2"
            }
          ]
        }
      ]
    }
  ]
}

我有一个名为 table 的对象，它有一个元素数组（不同的车辆功率类型，如 10 hp、20 hp...），每个功率都有一组车辆。最后，每辆车都有一组小时数和状态。我想要一个 HTML table，第一列是电源，第二列是车辆代码，接下来的 X 列 (24) 是小时数。

我当前的代码只能工作到第二个循环。第三次，我在 VS Code 上得到了一些关于“解析错误：意外标记，预期为”，“”的信息。

我在渲染中的反应代码如下：

{this.state.report.Table.map((d, idx) => (
                  
                    <tr>                          
                      <td style={{border:"1px solid"}} >{d.Power}</td>
                      {d.Vehicles.map((n, idy) => (
                        
                        <td style={{border:"1px solid"}}>{n.Code}</td>

                        ***************                          
                        {n.Hours.map((h, idz) => (
                            <td className={classes.available}></td>
                        ))}
                        ****************

                        ))}
                    </tr>
                ))}

如果我删除 *** 中的代码，它会起作用，但对于第三个循环它不会。 VS Code 的错误提示出现在第三个循环开始时，在“{n.”

提前感谢您的帮助，如果我遗漏了什么或者您需要更多详细信息，请告诉我。我确定我缺少代码规则，正如您从我的问题中想象的那样，我对 React 不流利。

Answer 1

我看到唯一明显缺失的是中间映射需要 return 单个节点。

 {this.state.report.Table.map((d, idx) => (
   <tr key={idx}>                          
     <td style={{border:"1px solid"}} >{d.Power}</td>

     {d.Vehicles.map((n, idy) => (
       <React.Fragment key={indy}> //<-- return single node from map here

         <td style={{border:"1px solid"}}>{n.Code}</td>
         {n.Hours.map((h, idz) => (
           <td key={idz} className={classes.available}></td>
         ))}

       </React.Fragment>
     ))}

   </tr>
 ))}

如何在 ReactJS 中嵌套 3 个 map 循环函数

How to nest 3 map loop functions in ReactJS

javascript

loops

nested-loops

reactjs