如何在 React 中"flatten"嵌套对象数组？

Question

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

["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"；与相关联的"；街道"；。我正在尝试生成一个像这样的平面表。

租金9002022-03-212023-10-31

名称		街道	租约
Belvedere	1234 Main	2021-11-01
丽城	1235 Main	875
The Grayson	345 Maple	925

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}
</>
);

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

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