已为列表元素添加唯一key，React仍抛出key不唯一警告该如何解决？

• 第一步：校验item?.key的有效性
  你使用了可选链?.获取key值，如果部分item不存在key字段，会得到undefined作为key，多个相同的undefined/null/空值都会被React判定为重复key，触发警告。你可以临时添加打印代码，验证所有key是否符合唯一非空要求：

{data[0].items.map((item) => {
  console.log('当前item的key值：', item?.key)
  return (
    <a key={item?.key} className="my-component__slide">
      <li>
        <h3>{item?.title?.rendered}</h3>
        <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
      </li>
    </a>
  )
})}

如果打印结果出现重复值、空值、undefined，直接将key替换为后端返回的唯一业务字段即可，比如item.id。

• 第二步：临时兜底定位问题
  你可以先临时用数组下标作为key，测试警告是否消失：

{data[0].items.map((item, index) => (
  <a key={index} className="my-component__slide">
    <li>
      <h3>{item?.title?.rendered}</h3>
      <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
    </li>
  </a>
))}

如果替换后警告消失，就可以100%确定是原来的item?.key不符合要求。注意不要在生产环境用下标作为key，除非你的列表是静态的，不会发生增删、排序操作。

• 第三步：规范代码避免潜在异常
  你当前的代码有两处不符合规范的地方，也可能引发渲染异常：

1. HTML语义要求：<ol>的直接子元素必须是<li>，你现在将<a>作为<ol>的直接子元素，建议调整结构
2. React组件命名要求：自定义组件首字母必须大写，小写会被识别为原生HTML标签
   调整后的参考代码如下：

import React from 'react';

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

export default MyComponent;

内容的提问来源于stack exchange，提问作者user1941537