React中如何展平嵌套对象数组并渲染为统一的结构化表格

实现方案 #

第一步：修改父组件逻辑，将完整数据集传递给Lease组件 #

不需要在父组件循环遍历渲染Lease组件，直接把完整的leases数组作为props传递即可，修改后父组件代码如下：

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">
            <Lease leases={leases} />
          </div>
        )}
      </div>
    </div>
  );

第二步：重构Lease组件，内部完成数据处理和全表格渲染 #

组件内先对嵌套的leases数据做扁平化处理，把每个条目下的units数组拆分为独立的行数据，再统一渲染完整的表格结构，修改后Lease组件代码如下：

const Lease = ({ leases }) => {
  // 扁平化嵌套数据，得到所有表格行需要的字段
  const tableData = leases.flatMap(lease => {
    return lease.units.map(unit => ({
      name: lease.name,
      street: unit.street,
      rent: unit.monthly_rent,
      lease: unit.lease_expiration
    }))
  })

  return (
    <div>
      <MDBTable hover>
        {/* 统一渲染表头 */}
        <thead>
          <tr>
            <th>name</th>
            <th>street</th>
            <th>rent</th>
            <th>lease</th>
          </tr>
        </thead>
        <MDBTableBody>
          {/* 遍历所有扁平化后的数据渲染行 */}
          {tableData.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.street}</td>
              <td>{item.rent}</td>
              <td>{item.lease}</td>
            </tr>
          ))}
        </MDBTableBody>
      </MDBTable>
    </div>
  );
}

注：实际使用时建议给tr的key属性替换为业务唯一标识（比如unit_num+name组合），避免使用索引可能带来的渲染异常问题。

内容的提问来源于stack exchange，提问作者VonHugenstein