映射表数据二维数组

Question

我有一个有点奇怪的问题，我无法解决。我必须使用 react 渲染一个表格 - 但是我的数据结构是这样的，我需要第一级的名称作为表格标题 - 然后我需要将与该标题关联的数据映射到表格中的正确单元格中。

这是我的数据

[{
    "cell_id": 1,
    "step_data": [{
      "width": 1920,
      "name": "bruce",
    }, {
      "width": 2236,
      "name": "ben",

      }],
        "cell_name": " boys names"
      },
{
        "cell_id": 2,
        "step_data": [{
          "width": 1920,
          "name": "grace",
        }, {
          "width": 2236,
          "name": "megan",

        }],
        "cell_name": "girls names"
      }

为了映射表格标题，我这样做会动态呈现标题，但是我似乎无法将数据放在正确的标题下，因为它们都在同一行上。

有什么想法吗？

我想要的任务是有一个包含男孩名字和女孩名字两个标题的表格 - 我需要男孩名字中的 step_data 是男孩名字标题下的行，女孩名字中的 step_data 是女孩名字标题下的行

<table className="table">
    <tbody>
      <tr>
        {this.props.data.map((item, key) => <th key={key}>{item.cell_name}</th>
        )}

      </tr>
      {this.props.data.map(data => data.map((z, key) => <td key={key}>{z.name}</td>))}

      <tr>

      </tr>

    </tbody>
  </table>

Answer 1

{[
  ...Array( // get the number of rows you need to create
    Math.max(...this.props.data.map(({ step_data }) => step_data.length))
  ).keys()
].map(i => (
  <tr key={i}>
    {this.props.data.map(({ step_data, cell_name }) => (
      <td key={cell_name}>{(step_data[i] || {}).name}</td>
    ))}
  </tr>
))}