表格与地图的排序

Question

我正在尝试填充表格，我在调用api并执行以下操作

const addressTd = addressesInfo.map(item => (
<TableRow>
  <TableCell align="right">{item.officeName}</TableCell>
  <TableCell align="right">{item.address1}</TableCell>
</TableRow>));

然后在我的退货中执行以下操作

 <Table>
    <TableHead>
      <TableRow>
        <TableCell>Office Name</TableCell>
        <TableCell>Address Line 1</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableCell>{addressTd}</TableCell>
    </TableBody>
  </Table>

但是，这并没有达到预期的效果

我如何允许办公街实际在地址下显示？谢谢

Answer 1

您实际上是在渲染单元格中的所有行。这是固定版本：

const addressTrs = addressesInfo.map((item, i) => 
  <TableRow key={i}>
    <TableCell align="right">{item.officeName}</TableCell>
    <TableCell align="right">{item.address1}</TableCell>
  </TableRow>
);

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Office Name</TableCell>
      <TableCell>Address Line 1</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {addressTrs}
  </TableBody>
</Table>

如果您有元素数组，则必须具有唯一的key。