如何在 React 中使用地图内的地图？

Question

我有这样的对象：

[{a:1, rows:[]},{a:2,rows:[]}]

我想将 a 映射为表格列，将行映射为单元格。

我正在尝试这样：

  <thead>
    <tr>
      {doc.map(({
        _id, rfqID, supplier, notes, rows,
      }) => (
          <th>{supplier}</th>
        ))}
    </tr>
  </thead>
  <tbody>
    {rows.map(({ offerPrice }) => (
      <tr>
        <td>1</td>
        <td>{offerPrice}</td>
      </tr>
    ))}
  </tbody>

但我得到Uncaught ReferenceError: rows is not defined 将此表与标题和项目映射的正确语法是什么？

Answer 1

由于 doc 是对象数组，因此您需要在 doc 上进行映射，然后在行上再次映射以显示报价

  <thead>
    <tr>
      {doc.map(({
        _id,
        rfqID,
        supplier,
        notes,
        rows,
      }) => 
        <th key={_id}>{supplier}</th>
      )}
    </tr>
  </thead>
  <tbody>
  {doc.map(({ rows }) => 
    rows.map((offerPrice, index)  =>
      <tr key={`Key-$(index)`}>
        <td>1</td>
        <td>{offerPrice}</td>
      </tr>)
  )}
  </tbody>