React列表渲染出现唯一key警告，求助问题原因及解决方法

开发者阿泽

2026-7-22

React博客应用：列表key警告修复与组件重复渲染优化

一、解决列表key警告

问题原因

你将key属性放在了Post组件内部的<div>元素上，但React的列表key规则是：循环生成的列表直接子元素/组件必须携带唯一key。React只会识别列表最外层子节点的key，组件内部元素的key无法被React的列表diff算法识别，因此触发警告。

修复步骤

在PostsList的map循环中，给<Post>组件添加key属性，值用唯一的post.id：

const renderedPosts = postData.map((post) => <Post key={post.id} post={post} />);

移除Post组件内部<div>上的key（留着不影响功能，但属于冗余代码）：

function Post({ post }: { post: IPost }) {
  return (
    <div className="post my-4 p-6">
      <h2 className="text-2xl mb-4">{post.title}</h2>
    </div>
  );
}

二、优化PostsList重复渲染

问题原因

App组件中loading、error、posts状态更新时，会触发父组件重渲染，进而导致PostsList无条件重渲染；
PostsList未做记忆化处理，即使传入的posts属性没有变化，也会跟着父组件重新渲染。

优化方案

使用React.memo包裹PostsList组件，让它仅在posts属性发生变化时才重新渲染：

import { memo } from 'react';

const PostsList = memo(({ posts }: { posts: Array<IPost> }) => {
  const postData = posts === null ? [] : posts;
  const renderedPosts = postData.map((post) => <Post key={post.id} post={post} />);
  console.log("Render...");
  return <div className="flex flex-col">{renderedPosts}</div>;
});