React+Redux+Firestore组件挂载时删除按钮onClick立即触发问题排查

嘿，我一眼就抓到问题根源了！你在Project.js里的删除按钮写法有误——直接调用projectActions.deleteProject(project.id)会导致组件一渲染就执行删除函数，而不是等到用户点击按钮时才触发。

核心修复方案 #

把IconButton的onClick改成箭头函数包裹的形式，确保只有点击动作发生时才执行删除逻辑：

<IconButton onClick={() => projectActions.deleteProject(project.id)}>
  <ClearIcon></ClearIcon>
</IconButton>

问题原因解析 #

在React中，onClick属性需要接收一个函数引用，而不是函数执行的结果。你原本的写法onClick={projectActions.deleteProject(project.id)}是直接执行了deleteProject函数，把它的返回值（这里是Redux thunk函数）传给了onClick，所以组件挂载渲染时就会立刻触发这个函数。用箭头函数包裹后，相当于把一个“待执行的函数”交给了onClick，只有用户点击按钮时，这个箭头函数才会调用deleteProject。

额外优化建议 #

另外我注意到你的registerProjectListener函数存在小问题：外部声明的projects数组会在每次快照更新时持续累积数据，导致重复项目。可以把数组初始化移到快照回调内部，每次都重新构建最新的项目列表：

export const registerProjectListener = () => {
  return dispatch => {
    db.collection("projects").onSnapshot(snapshot => {
      const projects = []; // 移到这里，每次快照更新都重新初始化数组
      snapshot.docChanges().forEach(change => {
        if (change.type === "added") {
          console.log(change.doc.data());
          projects.push({ ...change.doc.data(), id: change.doc.id });
        } else if (change.type === "removed") {
          // 补充删除逻辑，过滤掉被移除的项目
          projects = projects.filter(project => project.id !== change.doc.id);
        }
      });
      dispatch({ type: ActionTypes.REGISTER_LISTENER, projects: projects });
    });
  };
};

这样就能保证每次快照更新后，projects数组都是最新的无重复数据。

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