时间戳

首页 > 解决方案 > 如何在 React 中“展平”嵌套对象数组？

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

问题描述

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

["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
    }
]

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

姓名 街道 租 租
丽城 第1234章 900 2021-11-01
丽城 第1235章 875 2022-03-21
格雷森 345枫 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 组件，并在该组件中迭代然后填充并返回填充的表，而不是单独传递“名称”。

有什么建议么？

标签： javascriptreactjs

解决方案

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

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

推荐阅读