如何在仅组件挂载时注册的回调中获取Zustand最新数据？

核心原因 #

你遇到的问题是闭包捕获导致的：挂载时创建的handleUpdate回调，会捕获当时组件内的valA和valB值。后续组件因状态更新重新渲染时，新的handleUpdate不会被注册（因为useEffect是空依赖），所以service触发回调时，始终用的是挂载时的初始值。

下面是几种满足「仅组件挂载时完成注册」要求的解决方案：

方案1：直接调用Store的getState()方法 #

这是最直接的Zustand原生解决方案——不需要在组件顶层解构状态，而是在回调里直接通过store实例获取最新状态。这样无论回调何时触发，拿到的都是实时的store数据，而且只需要注册一次。

示例代码：

// 假设你的Store创建方式如下
const useStore = create((set, get) => ({
  valA: 0,
  valB: 0,
  // ...其他状态或方法
}));

// 组件内部代码
useEffect(() => {
  const handleUpdate = () => {
    // 直接调用getState获取最新状态
    const { valA, valB } = useStore.getState();
    // 执行你的业务逻辑
    console.log("最新值：", valA, valB);
  };

  serviceA.registerUpdate(handleUpdate);
  return () => {
    serviceA.unregisterUpdate(handleUpdate);
  };
}, []); // 空依赖，仅挂载时注册一次

方案2：用useRef同步最新状态 #

如果还是习惯在组件顶层解构状态，可以用useRef来实时同步最新值，同时保持只注册一次回调：

const [valA, valB] = useStore();
// 用ref保存最新状态
const latestState = useRef({ valA, valB });

// 每次状态更新时，同步到ref
useEffect(() => {
  latestState.current = { valA, valB };
}, [valA, valB]);

// 仅挂载时注册回调
useEffect(() => {
  const handleUpdate = () => {
    // 从ref中获取最新的状态值
    const { valA, valB } = latestState.current;
    // 执行业务逻辑
  };

  serviceA.registerUpdate(handleUpdate);
  return () => {
    serviceA.unregisterUpdate(handleUpdate);
  };
}, []);

方案3：用Zustand自带的subscribe替代第三方注册 #

如果你的业务场景允许，可以直接使用Zustand内置的subscribe方法监听状态变化，替代serviceA的注册逻辑，这样不需要额外处理回调闭包问题：

useEffect(() => {
  // 订阅valA和valB的变化，当它们更新时自动触发回调
  const unsubscribe = useStore.subscribe(
    // 选择要监听的状态片段
    (state) => ({ valA: state.valA, valB: state.valB }),
    // 状态变化时执行的回调
    ({ valA, valB }) => {
      // 这里可以直接拿到最新值
      console.log("状态更新：", valA, valB);
    }
  );

  // 组件卸载时取消订阅
  return unsubscribe;
}, []);

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