在为 JSX 元素提供唯一键后，nextJs 中的唯一“键”道具警告未解决答案

【问题标题】：unique "key" props warning in nextJs not resolving after giving unique key to JSX element在为 JSX 元素提供唯一键后，nextJs 中的唯一“键”道具警告未解决
【发布时间】：2021-07-22 06:03:03
【问题描述】：

我正在制作一个 nextJS 应用程序，我正在使用 map() 渲染多个组件。但我为循环中的每个组件都提供了一个唯一的密钥，但仍然收到错误消息

我循环的对象数组

const gg = [
    {
      id: "0Lxs4a8cn8pmJ2QLpAJJ",
      phone: "03356210555",
      address: "INSIDE KABLI GATE GUJRAT",
      title: "USAMA FROM PAKISTAN",
      name: "USAMA .AR",
      fax: "2212",
      auctionPOS: "18221",
      auctionName: "PAK AUC",
    },
    {
      id: "XPsusA0fBskQR6hBubpg",
      title: "MALIK SARWAR FROM MALIK TRADING",
      fax: "03356210555",
      address: "INSIDE KABLI GATE GUJRAT",
      auctionPOS: "9318",
      name: "MALIK SARWAR",
      auctionName: "OMAYA",
      phone: "03356210555",
    },
  ];

还有我的 JSX 代码

{gg.map((customer) => (
      <>
        <p key={customer.id}> {customer.phone} </p>
      </>
    ))}

如您所见，customer.id 被用于唯一的关键道具
我想要的问题的解决方案是“如何在为组件/JSX 元素提供唯一键后解决唯一键道具的问题”

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

必须为映射返回中的直接子级指定唯一键

{gg.map((customer) => (
       <p key={customer.id}> {customer.phone} </p>
    ))}

【讨论】：