如何解决React警告：列表中每个子元素必须拥有唯一的“key”prop

这个警告触发的原因是React规定，使用map渲染列表结构时，返回的每个最外层节点必须设置唯一的key属性，用于React做虚拟DOM的差异比较，提升渲染效率、避免列表渲染出现内容错位的问题。

你只需要给map方法返回的最外层<a>标签添加key属性即可：

• 优先选择item自带的唯一、固定的字段作为key值，比如数据接口返回的item.id，这是性能最优的方案，修改后的完整代码如下：

import React from 'react';

function MyComponent(...data) {
  return (
    <section className="my-component">
      <ol className="my-component__cards">
        {data[0].items.map((item) => (
          {/* 给最外层的a标签添加key属性 */}
          <a key={item.id} className="my-component__slide">
            <li>
              <h3>{item?.title?.rendered}</h3>
              <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
            </li>
          </a>
        ))}
      </ol>
    </section>
  );
}

export default MyComponent;

• 如果item没有唯一标识字段，万不得已可以使用map的索引参数作为key（这种方案只适用于列表不会发生增删、排序操作的场景，否则可能引发渲染异常），写法如下：

{data[0].items.map((item, index) => (
  <a key={index} className="my-component__slide">
    {/* 内部内容保持不变 */}
  </a>
))}

你当前的HTML结构不符合语义规范：<ol>的直接子元素必须是<li>，建议调整结构把<a>标签放到<li>内部，避免浏览器解析HTML时出现异常。

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