如何在 React 中“展平”嵌套对象数组？答案

【问题标题】：How to "flatten" a nested object array in React?如何在 React 中“展平”嵌套对象数组？
【发布时间】：2021-11-12 13:04:42
【问题描述】：

我有一个包含多个记录的对象，格式如下：

["name": 'The Belvedere',
"units":[
    {"unit_num": 1,
    "street": '1234 Main',
    "monthly_rent": 900,
    "lease_expiration" 2021-11-01
    },
    {"unit_num": n,
    "street": 'Some address',
    "monthly_rent": 900,
    "lease_expiration" 2021-11-01
    }
]

对于多个“名称”中的每一个，它们都有一个且只有一个“units”数组，并且在“units”数组中，将有一对多的“unit_num”与关联的“street”。我正在尝试生成一个看起来像这样的平面表。

name	street	rent	lease
The Belvedere	1234 Main	900	2021-11-01
The Belvedere	1235 Main	875	2022-03-21
The Grayson	345 Maple	925	2023-10-31
...

目前的代码是这样的：屏幕映射“租约”对象并调用“租约”组件并传递单个“租约”条目。

return (
    <div className="container">
      <h1>Leases</h1>
      <div className="row justify-content-center mt-5 lease">
        {loading ? (
          <h1>
            <Loader />
          </h1>
        ) : error ? (
          <h1>Error</h1>
        ) : (
          leases.map((lease) => {
            return (
              <div className="col-md-9">
                <Lease lease={lease} />
              </div>
            );
          })
        )}
      </div>
    </div>
  );

Lease 组件将其打印到屏幕上。

return (
    <div>
      <MDBTable hover>
        <MDBTableBody>
          <tr>
            <td>{name}</td>
            <td>{street}</td>
            <td>{monthly_rent}</td>
            <td>{lease_expiration}</td>
          </tr>
        </MDBTableBody>
      </MDBTable>
    </div>
  );

我面临的挑战是因为我正在迭代对象，我可以让每一行显示，但它们不在表格中，只是屏幕上的单独行。

但我不知道如何将整个数据集对象传递给 Lease 组件，并在该组件中迭代然后填充并返回填充的表，而不是单独传递“名称”。

有什么建议吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

Lease 组件必须返回行而不是整个表，因此您必须将表的其他组件移动到父组件：

...

return (
    <div className="container">
      <h1>Leases</h1>
      <div className="row justify-content-center mt-5 lease">
        {loading ? (
          <h1>
            <Loader />
          </h1>
        ) : error ? (
          <h1>Error</h1>
        ) : (
          <div className="col-md-9">
            <MDBTable hover>
              <MDBTableHead>
                <tr>
                  <th>name</th>
                  <th>street</th>
                  <th>rent</th>
                  <th>lease</th>
                </tr>
              </MDBTableHead>
              <MDBTableBody>
              {
                leases.map((lease) => {
                  return (
                    <Lease lease={lease} />
                  );
                })
              }
              </MDBTableBody>
            </MDBTable>
          </div>
        )}
      </div>
    </div>
  );

还有 Lease 组件：

...

const rows = lease.units.map((unit, index) => (
  <tr key={index}>
    <td>{lease.name}</td>
    <td>{unit.street}</td>
    <td>{unit.monthly_rent}</td>
    <td>{unit.lease_expiration}</td>
  </tr>
))

return (
  <>
    {rows}
  </>
);

【讨论】：

这是我缺少的部分。谢谢！

【解决方案2】：

您还可以映射租赁对象的 units 属性，并为每个单元返回一个 Lease 组件：

leases.map((lease) => { 
    return lease.units.map(unit) => { return (
        <div className="col-md-9">
            <Lease lease={...unit, name: lease.name} />
        </div>
    ); 
})

【讨论】：