在React

时间:2017-06-10 19:00:05

标签: json reactjs nested

我正在开发一个体育应用程序,我一直在努力在React(15.5.4)中提交联赛积分表。

令人困惑的是,我有一个完整呈现的个人团队的统计表,据我所知,团队统计数据具有与联盟统计数据完全相同的结构和相同的嵌套级别数:

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

我的代码(适用于团队统计信息):

 <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>

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

供参考,以下是排名的数据网址(未正确映射到表格):https://us-central1-sharp-box-sports.cloudfunctions.net/api/standings?sport=mlb

团队统计数据的数据网址(工作正常):https://us-central1-sharp-box-sports.cloudfunctions.net/api/playerStats?gameID=nba.g.2017051110

0 个答案:

没有答案