如何解决错误问题：当我 map react-icons 时，数组 react/jsx-key 中的元素缺少“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 中有这个（将来我希望它从数据库中获取）：

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

在反应中，索引应该是作为键传递的最后一件事，您可以使用标题或唯一 ID 作为键。 你可以在这里阅读更多

更多的