React函数组件中Zustand/useState状态变量未更新问题

问题描述 #

组件加载时调用createProject接口获取projectId并通过Zustand存入状态，但WebSocket的回调函数onServerCode、onServerRecommendation中始终获取到projectId为null，只有页面刷新后才正常，换成普通useState也存在同样问题。

问题根源 #

这是React闭包陷阱导致的：

• 绑定WebSocket监听的useEffect依赖为空数组，仅在组件首次渲染时执行一次。
• 此时onServerCode和onServerRecommendation函数被创建，捕获了当时的projectIdStorage值（初始为null）。
• 后续createProject成功更新Zustand状态后，这两个回调函数并不会重新创建，依然保留着对旧projectIdStorage的引用。

解决方案 #

方案1：监听projectIdStorage变化，重新绑定WebSocket回调

修改WebSocket的useEffect，将projectIdStorage加入依赖数组，每次状态更新时先移除旧监听，再绑定新的回调（此时回调会捕获最新的projectIdStorage）：

useEffect(() => {
  // 绑定最新的回调
  socket.on("server_recommendation", onServerRecommendation);
  socket.on("server_code", onServerCode);

  return () => {
    // 清理旧监听
    socket.off("server_recommendation", onServerRecommendation);
    socket.off("server_code", onServerCode);
    socket.disconnect();
  };
}, [projectIdStorage]); // 加入projectIdStorage作为依赖

注意：必须使用socket.off移除对应事件的旧回调，避免同一事件绑定多个回调导致重复执行。

方案2：直接从Zustand store获取最新状态

不需要依赖组件捕获的变量，在回调函数里直接调用Zustand的getState()方法获取最新的projectIdStorage：

const onServerCode = () => {
  setLoading(false);
  // 直接获取最新的projectId
  const latestProjectId = useProjectStore.getState().projectIdStorage;
  refreshProjectStates(latestProjectId);
  setPrompt("");
};

const onServerRecommendation = () => {
  const latestProjectId = useProjectStore.getState().projectIdStorage;
  refreshRecommendations(latestProjectId);
};

这种方式无需修改useEffect的依赖，直接绕过闭包陷阱获取最新状态。

方案3：让WebSocket推送时携带projectId

如果后端可以调整，在推送server_recommendation和server_code事件时，直接把projectId作为参数传递过来，这样回调里直接使用传入的projectId即可：

const onServerCode = (projectId: string) => {
  setLoading(false);
  refreshProjectStates(projectId);
  setPrompt("");
};

const onServerRecommendation = (projectId: string) => {
  refreshRecommendations(projectId);
};

这种方式最彻底，完全避免前端状态同步问题，但需要后端配合修改。

额外优化建议 #

• 移除// eslint-disable-next-line react-hooks/exhaustive-deps注释，依赖数组要完整，避免隐藏的闭包问题。
• 确认createProject接口调用时，初始传入的project_id: projectIdStorage（值为null）是否符合后端参数要求，避免不必要的请求错误。

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