[英]Console error: index.js:1 Warning: Each child in a list should have a unique “key” prop
I'm having an issue with my React code.我的 React 代码有问题。
Here's my code:这是我的代码:
const App = () => {
const sectionData = [
{
id: 1,
rev: true,
path: "/about",
title: "about us",
bgColor: "#D6D6D6",
imgURL:
"https://images.pexels.com/photos/1170412/pexels-photo-1170412.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
heading: "The Scroll Project",
definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?
Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?
Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?`,
},
{
id: 2,
rev: false,
path: "/services",
title: "our services",
bgColor: "#FACACA",
imgURL:
"https://images.pexels.com/photos/3935702/pexels-photo-3935702.jpeg?cs=srgb&dl=pexels-leah-kelley-3935702.jpg&fm=jpg",
heading: "The. Best. Service. Ever.",
definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?
Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est molestias aperiam doloremque et sit, necessitatibus officia unde. Ex quod, illum facilis necessitatibus id inventore maxime, adipisci aut labore nihil eligendi ipsa! Assumenda enim nostrum blanditiis atque suscipit, exercitationem amet necessitatibus.`,
},
{
id: 3,
rev: true,
path: "/tours",
title: "our tours",
bgColor: "#CAB3B3",
imgURL:
"https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?cs=srgb&dl=pexels-canva-studio-3153198.jpg&fm=jpg",
heading: "Low Cost yet Satisfactory",
definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?`,
},
];
return (
<Router>
<div className="app">
<Navbar />
<Switch>
<Route exact path="/">
<Main />
</Route>
<Switch>
{sectionData.map((section) => {
return (
<Route path={section.path}>
<Section data={section} key={section.id} />
</Route>
);
})}
</Switch>
</Switch>
</div>
</Router>
);
};
As you can see, I have the key set to ={section.id} in the map function.如您所见,我在 map 函数中将键设置为 ={section.id}。 It even shows it on the React dev tools: enter image description here enter image description here
它甚至在 React 开发工具上显示:在此处输入图像描述 在此处输入图像描述
I'm using Styled Components for the Section so I'm not sure if it has anything to do with the error.我正在为该部分使用样式化组件,所以我不确定它是否与错误有关。 Is the React Router contributing to the issue?
React Router 是否导致了这个问题?
{sectionData.map((section, index) => {
return (
<Route key={index} path={section.path}>
<Section data={section} key={section.id} />
</Route>
);
})}
Whenever creating an array of JSX, always add key attribute.每当创建一个 JSX 数组时,总是添加 key 属性。
You need key on your Route
JSX tag.您需要
Route
JSX 标签上的密钥。 It is the child which the list is iterating over.它是列表迭代的孩子。
Section
is just one child component in each Route
Component. Section
只是每个Route
Component 中的一个子组件。
<Switch>
{sectionData.map((section) => {
return (
<Route path={section.path} key={section.id}>
<Section data={section} />
</Route>
);
})}
</Switch>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.