使用动态列单元格创建 table 时出现问题

Question

我正在创建一个包含动态单元格和列的 table 组件，header 工作正常，但我在处理行时遇到问题，我无法让它们正确呈现.

我希望能够这样做，以便我可以在应用程序的不同位置重用该组件，而不必在其他组件中为 table 编写所有代码。

我做错了什么？

Warning: Each child in a list should have a unique "key" prop.

Uncaught TypeError: Cannot read properties of null (reading 'map') The

above error occurred in the component:

我不明白为什么在我向每个组件发送 index 时它会给我一个 key 警告

公司页面

import DataTable from "../components/DataTable";

const CompanyPage = function () {
  const headers = [
    "id",
    "Company Name",
    "Alias",
    "R.N.C.",
  ];

  const Data_fromAPI = [
    {
      id: 1,
      cn: "Comany Name ABC",
      a: "Alias ABC",
      rnc: "123456789",
    },
    {
      id: 2,
      cn: "Comany Name DFG",
      a: "Alias DFG",
      rnc: "987654321",
    },
    {
      id: 3,
      cn: "Comany Name HYJ",
      a: "Alias HYJ",
      rnc: "112233456",
    },
  ];

  return (
    <>
      <DataTable Headers={headers} Data={Data_fromAPI} />
    </>
  );
};
export default CompanyPage;

数据表

import {
  Table,
  TableContainer,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
} from "./DataTableStyled";

const DataTable = function ({ Headers, Data }) {
  // Dinamic Head
  const HeadItem = function ({ item, index }) {
    return <Th key={index}>{item}</Th>;
  };

  return (
    <TableContainer>
      <Table>
        <Thead>
          <Tr>
            {Headers.map((head, i) => (
              <HeadItem item={head} index={i} />
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {Data.map((row, index) => (
            <Tr key={index}>
              {Headers.map((head) => (
                <Td>{row[head]}</Td>
              ))}
            </Tr>
          ))}
        </Tbody>
      </Table>
    </TableContainer>
  );
};
export default DataTable;

CSS

import styled, { css } from "styled-components";

export const TableContainer = styled.div`
  overflow-x: auto;
`;

export const TableBase = css`
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
`;

export const Table = styled.table`
  border-collapse: collapse;
  width: 100%;
`;

export const Thead = styled.thead``;
export const Th = styled.th`
  ${TableBase}
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #00aea9;
  color: whitesmoke;
`;
export const Tr = styled.tr`
  &:nth-child(even) {
    background-color: #f2f2f2;
  }
  &:hover {
    background-color: #ddd;
  }
`;
export const Td = styled.td`
  ${TableBase}
`;
export const Tbody = styled.tbody``;
export const Tfoot = styled.tfoot``;

错误：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/browse/styled-components@5.3.5/dist/styled-components.cjs.js.map"></script>

Answer 1

<Td>需要一个关键道具。

{Headers.map((head) => (
  <Td>{row[head]}</Td> // key here.
))}

我用你的代码创建了一个 sandbox（正常 html table）并将 key 设置为一个随机整数。警告消失了。

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}
...
<tbody>
      {Data.map((row, index) => (
        <tr key={index}>
          {Headers.map((head) => (
            <td key={getRandomInt(100000)}>{row[head]}</td>
          ))}
        </tr>
      ))}
</tbody>

无法重现其余两个错误。

Edit：其余列未显示数据，因为 headers 与数据属性不匹配。更新headers为（sandbox已更新）-

const headers = ["id", "cn", "a", "rnc"];

使用动态列单元格创建 table 时出现问题

Problem creating a table with dynamic column cells

javascript

reactjs

html-table