如何解决错误问题：当我映射反应图标时，数组反应/jsx键中的元素缺少"key"道具？

Question

我尝试了许多方法来动态显示图标，但这一种在我的情况下有效：

<div style={{display: "flex", flexDirection: "row"}}>
{logo?.map((logos, index )=> {return (
<React.Fragment key={index}>
<IconContext.Provider
key={index}
value={{ color: "#fff", size: '30px', display: "inlineblock"}}
>
<div>
{logos}
</div>
</IconContext.Provider>
</React.Fragment>
)})     }</div>

我有这个(将来我想从数据库中获取(常量：

const realizacjeGallery = [{
id: "ssss",
title: "ssss", 
description: <>zzxxx</>,
photo: zzz,
logo: [<DiReact/>, <SiFirebase/>]
},
{ id: "ss",
title: "ssss",
description: <>zzz
</>,
photo: zzz,
logo: [<DiReact/>, <SiFirebase/>]
}, 
{
id: "zzz",
title: "sssl",
description: <>ssss
</>,
photo: muz,
logo: [<BsWordpress/>, <DiJqueryLogo/>]
}
]

这段代码显示在我图标的前端。但部署后，我得到了一个致命的错误：

Error: Missing "key" prop for element in array  react/jsx-key

我不知道该怎么做。我尝试了很多像key={`${title}` + index}这样的键组合，但它没有改变任何东西。

Answer 1

在react中，索引应该是最后一个作为键传递的东西，您可以使用title或唯一ID作为键。你可以在这里阅读更多

更多