如何在 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 表格，第一列是电源，第二列是车辆代码，下 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

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

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