React useReducer执行fetch后dispatch未触发组件重渲染的原因

问题描述 #

在React中使用useReducer管理任务状态时，遇到如下异常现象：

• 先发送DELETE请求、再调用dispatch更新状态，组件不会重渲染，状态无变化；
• 调换顺序，先dispatch更新状态、再发送请求，状态能正常更新，组件也会重渲染。

原失效代码 #

const deleteTask = async (event) => {
    event.preventDefault();
    console.log("delete task");
    await fetch("http://localhost:3001/", {
      method: "DELETE",
      mode: "cors",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({ _id: state.task._id }),
    });
    dispatch({ type: "deleteTask", task: undefined });
};

修改后有效代码 #

const deleteTask = async (event) => {
    event.preventDefault();
    dispatch({ type: "deleteTask", task: undefined });
    console.log("delete task");
    await fetch("http://localhost:3001/", {
      method: "DELETE",
      mode: "cors",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({ _id: state.task._id }),
    });
};

Reducer中deleteTask的处理逻辑 #

else if (action.type === "deleteTask") {
    return {
      ...state,
      isEditing: !state.isEditing,
      task: action.task,
    };
}

核心原因 #

问题本质是组件挂载状态失效：

• 当先执行await fetch时，请求等待过程中，组件可能已经因为其他状态变化（比如页面路由跳转、父组件状态更新）被卸载，此时后续的dispatch是在已卸载的组件上下文执行，React会直接忽略这个状态更新请求，自然不会触发重渲染。
• 而把dispatch放在请求前，组件会立刻更新状态：isEditing取反、task设为undefined，这会触发组件重渲染，确保后续fetch执行时组件仍处于挂载状态，状态更新有效。

额外补充：你的reducer中isEditing: !state.isEditing的逻辑，会直接切换编辑模式状态。如果原状态下isEditing为true，执行delete后会变为false，这可能直接导致编辑相关的UI组件被卸载——如果你的deleteTask所在组件正是依赖isEditing来渲染的，那么先请求后dispatch的场景下，请求还没完成，组件已经因为isEditing的变化被卸载，后续的dispatch完全无效。

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