我该如何摆脱 - 警告：列表中的每个孩子都应该有一个唯一的“关键”道具[重复]

Posted 2023-02-22

【中文标题】我该如何摆脱 - 警告：列表中的每个孩子都应该有一个唯一的“关键”道具[重复]

【英文标题】：How do I get rid of - Warning: Each child in a list should have a unique "key" prop [duplicate]

【发布时间】：2022-01-12 02:33:15

【问题描述】：

我怎样才能摆脱这个警告。我讨厌在控制台中看到它。我觉得我做的一切都是对的，但我一直收到这个警告。这就是我正在做的：

      reviews.map((review, i) => 
    return (
      <>
        <sl-details summary=`$review.name` key=i open>
          <p>review.review</p>
        </sl-details>
        <br />
      </>
    );
  )

我不知道堆栈是否有任何相关性，但我正在使用 Nextjs 和鞋带。

【参考方案1】：

您没有将key 定位在地图回调中的第一个节点。

使用显式 语法声明的片段可能有 键。一个用例是将一个集合映射到一个数组 碎片

查看that page 的最后一部分。

所以你的代码应该变成：

reviews.map((review, i) => 
    return (
      <React.Fragment key=i>
        <sl-details summary=`$review.name` open>
          <p>review.review</p>
        </sl-details>
        <br />
      </React.Fragment>
    );
  )

【讨论】：

谢谢！我今天学到了一些新东西。从未意识到

不客气 :)

【参考方案2】：

key=i 应该放在外部 <></> 元素上，为此，您需要将它们转换为完整的 <Fragment> 元素。

更新代码：

reviews.map((review, i) =>
    <Fragment key=i>
      <sl-details summary=`$review.name` open>
        <p>review.review</p>
      </sl-details>
      <br />
    </Fragment>
)

PS 我还缩短了它以不使用不需要的return。

【讨论】：

你是对的。谢谢！