Проблема с созданием таблицы с ячейками динамического столбца

Я создаю компонент таблицы с динамическими ячейками и столбцами, заголовок работает нормально, но у меня проблемы со строками, я не могу заставить их правильно отображаться.

Я хочу иметь возможность сделать это, чтобы я мог повторно использовать этот компонент в разных местах своего приложения, а не писать весь код для таблицы в других компонентах.

Что я делаю не так?

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:

Я не понимаю, почему он выдает мне предупреждение key, если я отправляю index каждому компоненту

Страница компании

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``;

Ошибка: enter image description here

<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>
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<Td> нужен реквизит для ключей.

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

Я создал песочница с вашим кодом (обычная HTML-таблица) и установил 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>

Не удалось воспроизвести остальные две ошибки.

Редактировать: в остальных столбцах данные не отображаются, так как заголовки не соответствуют свойствам данных. Обновить headers до (обновлено песочница) -

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

Благодарю вас! Я не знал, что у него тоже есть key. Один вопрос, почему у меня остальные ячейки не рендерятся? название компании, псевдоним, r.c.n..

I'm newbie 16.05.2022 21:54

@I'mnewbie Обновленный ответ. headers не совпадать с реквизитами данных. Теперь вы можете видеть все данные столбца. Можно принять это как ответ.

Aseem Gautam 16.05.2022 22:19

Другие вопросы по теме