React项目删除按钮首次点击无效，需两次点击问题求助

问题根源 #

核心问题出在Feed.js中遍历渲染Post组件时使用了不稳定的key值：

posts.map((x) => (
  <Post key={Math.random()} post={x} handleDelete={handleDelete} />
))

React依赖key值识别组件实例，Math.random()每次渲染都会生成新值，导致React无法正确复用Post组件实例，而是反复销毁重建。这会引发组件内部状态和props绑定异常，首次点击时_id未正确传递，第二次点击时组件实例稳定后才恢复正常。

修复方案 #

1. 替换为稳定唯一的key #

将Post组件的key替换为帖子的_id（每个帖子的唯一标识）：

// Feed.js 中修改map部分
posts.map((x) => (
  <Post key={x._id} post={x} handleDelete={handleDelete} />
))

2. 可选优化：确保删除操作完成后再刷新列表 #

当前handleDelete中dispatch删除后立即调用fetchPosts，可能后端删除请求还未完成就发起查询，导致数据不一致。可以修改为等待删除action完成后再刷新：

// Feed.js 中修改handleDelete
const handleDelete = async (id) => {
  await dispatch(deletePost(id)); // 等待删除完成
  fetchPosts();
};

注：当前deletePost已是async函数，自动返回Promise，可直接用await等待。

3. 额外检查：避免解构undefined #

为防止post对象未加载完成时解构报错，可给post添加默认空对象：

// Post.js 中修改解构
const { _id, userId, desc, img, likes, comment } = post || {};

修改后的关键代码片段 #

Feed.js（map渲染部分） #

{posts.length > 0 ? (
  posts.map((x) => (
    <Post key={x._id} post={x} handleDelete={handleDelete} />
  ))
) : (
  <div className="progress">
    <CircularProgress size={25} color="primary" />
  </div>
)}

Feed.js（优化后的handleDelete） #

const handleDelete = async (id) => {
  await dispatch(deletePost(id));
  fetchPosts();
};

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