如何在反应表中呈现数据

Question

这是我的桌子：

render() {
  const { name } = this.props.emp
  const { designation } = this.props.emp
  const headerData = [
    {
      header: 'Employee',
      key: 'emp',
    },
    {
      header: 'Designation',
      key: 'desg',
    },
  ]
  const rowData = [
    {
      emp: { name },
      desg: { designation },
    },
  ]
  return (
    <DataTable
      rows={rowData}
      headers={headerData}
      render={({ rows, headers, getHeaderProps }) => (
        <TableContainer title="Emp Table">
          <Table>
            <TableHead>
              <TableRow>
                {headers.map((header) => (
                  <TableHeader {...getHeaderProps({ header })}>
                    {header.header}
                  </TableHeader>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.map((row) => (
                <TableRow key={row.id}>
                  {row.cells.map((cell) => (
                    <TableCell key={cell.id}>{cell.value}</TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    />
  )
}

我正在从API调用中获取名称和指定，并通过道具进行渲染。我可以在表中呈现数据，但是不是在单个表中获取名称，而是在多个具有名称的表。

中呈现数据。

我想在一个表中显示名称。谁能帮助我弄清楚代码出了什么问题？

Answer 1

[docs说：

行属性是您向我们提供要在表格中呈现的所有行的列表的位置。唯一的硬性要求是这是一个对象数组，并且每个对象上都有一个唯一的id字段。

您需要在id中提供唯一的rowData：

const rowData = [
  {
    id: 'id1',
    emp: 'Name 1',
    desg: 'Desg 1',
  },
  {
    id: 'id2',
    emp: 'Name 2',
    desg: 'Desg 2',
  },
]

检查sample-data