React在Django项目中已设唯一键仍触发唯一键警告问题

我之前也踩过这个坑——明明用了Django模型的自增pk当key，却还是收到React的唯一键警告，大概率是key的位置不对，或者数据有小细节没注意到，下面给你一步步排查和解决的方法：

1. 先确认key的位置是否正确 #

React要求key必须添加在map遍历生成的最外层元素上，而不是它的子元素。很多人会不小心把key加错地方，比如：

错误示例： #

// 错误：key加在了内部的h2标签上
{blogs.map(blog => (
  <div>
    <h2 key={blog.pk}>{blog.title}</h2>
  </div>
))}

正确示例： #

// 正确：key加在map返回的最外层div上
{blogs.map(blog => (
  <div key={blog.pk}>
    <h2>{blog.title}</h2>
  </div>
))}

2. 如果用了子组件（比如你的BlogShow.js），key要加在父组件渲染子组件的地方 #

如果你的结构是在app.js里用map渲染BlogShow组件，那key必须加在<BlogShow>标签上，而不是BlogShow.js内部的根元素上：

app.js里的正确写法： #

// 正确：在父组件中给子组件添加key
{blogs.map(blog => (
  <BlogShow key={blog.pk} blog={blog} />
))}

别在BlogShow.js里的根元素加key，因为此时遍历已经在父组件完成，子组件内部的key对React的列表识别完全没用。

3. 确认API返回的pk是唯一且存在的 #

虽然Django的pk默认是自增唯一的，但还是要确认API返回的数据里每个博客项都有pk字段，且没有重复：

可以在获取数据的地方加个日志排查：

// 在app.js或者BlogShow.js的fetch逻辑里添加
useEffect(() => {
  fetch('/api/blogs/')
    .then(res => res.json())
    .then(data => {
      console.log('返回的博客数据：', data);
      // 检查每个item的pk是否存在，有没有重复
      const pks = data.map(item => item.pk);
      const hasDuplicate = new Set(pks).size !== pks.length;
      console.log('是否有重复pk？', hasDuplicate);
      setBlogs(data);
    });
}, []);

如果发现有pk为undefined的项，那要检查Django的序列化器是否正确返回了pk字段（比如用ModelSerializer默认会包含，但如果自定义了fields要确保把pk加进去）。

总结 #

按照上面的步骤排查，90%的情况都是key的位置加错了，剩下的小概率是数据本身的问题。调整后应该就能消除警告啦！

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