我正在努力擺脫這個錯誤資訊。我的代碼做錯了什么？我看不出應該在哪里添加密鑰。
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;
uj5u.com熱心網友回復：
迭代中的每一項都需要一個唯一的識別符號，用于 React 的內部作業。添加key到最外層元素
<div className="col-md-4" key={link.id}>
uj5u.com熱心網友回復：
在 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>
)
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/322064.html
標籤：javascript 反应
上一篇：如何匯入不同名稱的MUI組件？