React组件重复渲染，feedPosts迭代3次且加key仍报错的问题

一、解决"需添加key"的警告 #

你已经加了key={post.id}但仍收到警告，大概率是post.id无效：

• 检查接口返回的post对象是否真的包含id字段，有没有拼写错误（比如后端返回的是_id或postId）；
• 确认post.id是唯一值，不存在重复；
• 临时用index替代post.id测试（仅用于排查，生产环境不推荐），如果警告消失，说明post.id确实存在问题：

  {feedPosts.map((post, index) => 
    <PostComponent key={index} {...post} />
  )}
  

二、终止组件重复渲染的问题 #

组件渲染3次通常是Redux状态流转+React开发模式的双重原因：

1. 初始状态缺失：如果Redux中feedPosts.posts的初始值不是空数组（比如是undefined），组件会先渲染一次；
2. React严格模式：开发环境下，React严格模式会强制组件额外渲染一次（用于检测副作用），这是正常现象，生产环境自动消失；
3. 请求完成更新状态：接口返回数据后dispatch更新Redux，组件第三次渲染。

修复步骤：

• 给Redux的feedPosts reducer设置初始空数组：

  const initialState = {
    posts: []
  };
  

• 优化请求逻辑，避免无效请求：

  useEffect(()=>{
    if (!authToken) return; // 无token时跳过请求
    axios.get("http://localhost:8080/posts", {
      headers: { 'authorization': authToken }
    })
    .then(res => dispatch(setFeedPosts({ posts: res.data })))
    .catch(err => console.error("获取帖子失败：", err));
  }, [authToken, dispatch]); // 添加必要依赖，避免闭包问题
  

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