尽管添加了唯一键，但反应仍会发出警告答案

【问题标题】：Despite adding a unique key, react is throwing a warning尽管添加了唯一键，但反应仍会发出警告
【发布时间】：2021-08-26 12:29:14
【问题描述】：

尽管向元素 key={item.?key} 添加了唯一键，但我仍然收到以下警告：

警告：列表中的每个孩子都应该有一个唯一的“key”道具。 使用<ol>检查顶级渲染调用。

import React from 'react';

function myComponent(...data) {
  return (
    <section className="my-component">
      <ol className="my-component__cards">
        {data[0].items.map((item) => (
          <a key={item?.key} className="my-component__slide">
            <li>
              <h3>{item?.title?.rendered}</h3>
              <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
            </li>
          </a>
        ))}
      </ol>
    </section>
  );
}

export default myComponent;

谢谢

【问题讨论】：

你能显示data[0].items
不应该是item?.key 吗？你有.?，但可选链接是?.
对不起，我的问题是一个错字。我纠正了它。它是 item?.key。我将对象中的哪个属性添加为 a 标签的键并不重要，我总是会收到相同的警告。
不要对键使用可选链，你必须提供一个唯一的键

标签： reactjs

【解决方案1】：

我看到你只是渲染数组。所以你可以设置key作为item的索引。

{data[0].items.map((item, index) => (
  <a key={index} ...

【讨论】：

【解决方案2】：

如果您的item 有一个名为key 的唯一道具，那么这必须很好，您需要将? 替换为!。（打字稿问题，打字稿解决方法：D）但如果您不确定，只需使用 index 作为 key prop。

{data[0].items.map((item, index) => (
  <a key={index} ...

【讨论】：