在React中将深度嵌套的json呈现为表

我正在开发一个体育应用程序，我在React（15.5.4）中花了很长时间试图呈现联赛排名表

令人困惑的是，我有一个针对单个球队的统计表，它呈现得非常完美，据我所知，球队统计数据的结构和嵌套级别与联盟统计数据完全相同：

[
  {
    teamID: whatever,
    Tables: [
      {
        Columns: [
          {
            Title: columnheader
          }
        ],
        Rows: [
          {
            Cells: [
              {
                Value: blah 
              }
            ]
          }
        ]
      }
    ]
  }
]

我的代码（适用于团队统计）：

{gameStatsTable.map（（团队）=>
{team.Tables.map（（table，idx）=>
{table.Columns.map（（column，idx2）=>
{column.Title}
)}
{table.Rows.map（（row，idx3）=>
{row.Cells.map（（cell，idx4）=>
{cell.Value}
)}
)}
)}
)}

但出于某种原因，当涉及到联盟统计数据时，它会映射列和行，但在尝试渲染行的单元格时会中断。我得到的具体错误是“undefined不是一个对象：row.Cells.map”。我没有看到什么

以下是排名的数据url（未正确映射到表），以供参考：

---

以及团队统计数据的数据url（工作正常）：

当您控制台时会发生什么。记录

行

和

单元格

的值？如果这里有未定义的内容，您应该可以通过打印变量的值来定位它。这就是令人沮丧的地方。如果我记录table.Rows[0].Cells，它将返回第一行的单元格数组。但是row.Cells.map显示为未定义。就像@JulienD建议的那样，通过调试器查看

row

是什么。只需将

{console.log（row）}

放在TableRowColumn组件之前。这将让我们深入了解那里的矮子。更准确地说，不是

table.Rows.map（（row，idx3）=>{console.log（row）；return@JulienD这是您建议的输出：但它看起来与工作的结构相同（游戏统计）：
 <div className="statsTableContainer">
      <Tabs style={tabContainerStyles}>
        {gameStatsTable.map((team) =>
          <Tab key={team.Label} label={team.Label} style={tabStyles}>
            {team.Tables.map((table, idx) =>
              <Table
                key={`table-${idx}`}
                selectable={false}
                multiSelectable={false}
                style={{
                  background: 'none',
                }}
              >
                <TableHeader
                  displaySelectAll={false}
                  adjustForCheckbox={false}
                >
                  <TableRow>
                    {table.Columns.map((column, idx2) =>
                      <TableHeaderColumn
                        key={`column-${idx2}`}
                        style={{...columnStyle, width: `${idx2 === 0 ? '30px' : '15px'}`, textAlign: `${idx2 === 0 ? 'left' : 'center'}`}}
                      >
                        {column.Title}
                      </TableHeaderColumn>
                    )}
                  </TableRow>
                </TableHeader>
                <TableBody
                  displayRowCheckbox={false}
                >
                  {table.Rows.map((row, idx3) =>
                    <TableRow key={`row-${idx3}`} style={{ color: 'white' }}>
                      {row.Cells.map((cell, idx4) =>
                        <TableRowColumn key={`cell-${idx4}`} style={{
                          ...columnStyle,
                          width: `${idx4 === 0 ? '30px' : '15px'}`,
                          textAlign: `${idx4 === 0 ? 'left' : 'center'}`,
                          color: `${cell.Highlight ? 'yellow' : 'white'}`,
                        }}>{cell.Value}</TableRowColumn>
                      )}
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            )}
          </Tab>
        )}
      </Tabs>     
    </div>