我正在創建一個帶有動態單元格和列的表格組件，標題作業正常，但我遇到了行問題，我無法讓它們正確呈現。
我希望能夠做到這一點，這樣我就可以在我的應用程式的不同位置重用這個組件，而不必為其他組件中的表撰寫所有代碼。
我究竟做錯了什么？
警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具。
Uncaught TypeError: Cannot read properties of null (reading 'map')
組件中出現上述錯誤：
我不明白為什么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``;
錯誤：
<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/[email protected]/dist/styled-components.cjs.js.map"></script>
uj5u.com熱心網友回復：
<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"];
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475939.html
標籤：javascript 反应 html表
下一篇：如何有條件地定義函式