列表中的每个孩子都应该有一个独特的"key"道具/反应

Question

我正在努力摆脱这个错误消息。我在代码中做错了什么?我看不出还有什么地方需要加键

import { AiOutlineLaptop } from "react-icons/ai";
import { FaBootstrap, FaReact } from "react-icons/fa";
const data = [
{ "Id": "1",
"title": "Create Components",
"text": "Lorem ipsum dolor sit amet consectetur.",
"icon": AiOutlineLaptop,
"icon1": "fas fa-shopping-cart",
},
{
"Id": "2",
"title": "Data Input",
"text": "Lorem ipsum dolor sit amet consectetur.",
"icon": "fas fa-circle fa-stack-2x",
"icon1": "fas fa-laptop fa-stack-1x fa-inverse",
},
{ "Id": "3",
"title": " React Life Cycle Method",
"text": "Lorem ipsum dolor sit amet consectetur.",
"icon": "fas fa-circle fa-stack-2x",
"icon1": "fab fa-btc fa-stack-1x fa-inverse",
},
];
const icons = [
AiOutlineLaptop,
FaReact,
FaBootstrap,
];

const Skills = () => {
return (
<>
<section className="page-section" id="services">
<div className="container">
<div className="text-center">
<h2 className="section-heading text-uppercase">Skills</h2>
<h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div className="row text-center">
{data.map((link, idx) => {
const Icon = icons[idx];
return (
<div className="col-md-4">
<Icon className="icon" key={icons[idx]} />
<h4 className="my-3" key={idx}>{link.title}</h4>
<p className="text-muted">{link.text}</p>
</div>
)
})}
</div>
</div>
</section>
</>
);
}
export default Skills;  

Answer 1

迭代中的每个项都需要一个唯一的标识符，用于React的内部工作。将key添加到最外层的元素

<div className="col-md-4" key={link.id}>

Answer 2

当在React中使用map来渲染组件时，你应该始终提供一个唯一的键到顶部元素，在您的例子中，简单的方法是使用索引(idx)，像这样

{data.map((link, idx) => {
const Icon = icons[idx];
return (
<div key={idx} className="col-md-4">
<Icon className="icon" key={icons[idx]} />
<h4 className="my-3" key={idx}>{link.title}</h4>
<p className="text-muted">{link.text}</p>
</div>
)
})}