如何解決錯誤問題：當我 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 作為鍵。 你可以在這里閱讀更多

更多的