将包含 arrays 对象的数组渲染为 React 中的数据表

Question

我想渲染表格，但无法正确渲染数据。

这只是tableData数组中的一行。 tableData是包含 10 个 arrays 的数组，如下所示。

 [
      { key: 'date', value: date },
      {
        key: 'opp',
        value: oppositeTeam.contestantName || '',
        handleClick: handleClick({ ...oppositeTeam, entityType: 'Team' })
      },
      { key: 'g', value: totalGoals || '' },
      { key: 'yc', value: yellowCards || '' },
      { key: 'rc', value: redCards || '' }
    ];

我正在下一个方式渲染表格：

renderTableData() {
    const { tableData } = this.state;
    const { addCustomAttribute } = this.props;

    return tableData.map((data) => (
      <tr>
        {data.map((item) => (
          <td title={item.value} key={item.id}>
            <a
               onClick={() => {
                 if (item.handleClick) item.handleClick;
               }}
            >
              {value !== null ? value : 'n/a'}
            </a>
          </td>
        ))}
      </tr>
    ));
  }

如何改进这些数据或逻辑以按预期协同工作？

Answer 1

我认为你错过了value item 。

代替

{value !== null ? value : 'n/a'}

至

{item.value !== null ? item.value : 'n/a'}

或简而言之

{item.value || 'n/a'}