使用地图排序表答案

【问题标题】：Table ordering with a map使用地图排序表
【发布时间】：2019-05-09 11:23:46
【问题描述】：

我正在尝试填充我的表格，我正在调用我的 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>

但是这并没有产生预期的效果

我怎样才能允许 office street 在地址下实际呈现？谢谢你

【问题讨论】：

我认为您不需要将 {adressTd} 包装在 <TableCell> 中，您已经从 .map 返回行和单元格
@sanjsanj 你是对的。

标签： javascript reactjs material-design

【解决方案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。

【讨论】：