React新手求助：Zustand状态更新函数无法修改状态

核心问题 #

1. 未正确订阅状态更新：你可能没有在React组件内通过useStoreZu()获取最新的bears值，而是引用了旧的变量快照，导致看不到更新后的状态。
2. 同步日志无法获取异步更新结果：Zustand的状态更新是异步批量执行的，直接在increasePopulation调用后同步console.log，只能拿到更新前的旧值。
3. 方法调用参数不匹配：你定义的increasePopulation不需要传参，但调用时传了1，这部分参数会被忽略，属于冗余代码。

修复当前bears更新问题 #

确保在React组件内部正确获取store的状态和方法，并通过useEffect监听状态变化来查看最新值：

// 在你的登录组件内部
import useStoreZu from './Store';
import { useEffect } from 'react';

const LoginComponent = () => {
  // 从store中解构状态和方法
  const { bears, increasePopulation } = useStoreZu();

  const handleCallbackResponse = async (res) => {
    dispatchLogin({ type: "LOGIN_INIT" });
    const userObj = jwt_decode(res.credential);

    try {
      const server_session_token = await axios({
        method: 'post',
        url: `${API_ENDPOINT}/login`,
        data: { email: userObj.email }
      });

      // 调用increasePopulation（无需传参）
      increasePopulation();
      increasePopulation();
      increasePopulation();
      increasePopulation();
      increasePopulation();
      increasePopulation();

      dispatchLogin({
        type: "DIRECT_LOGIN",
        payload: server_session_token
      });

    } catch (err) {
      console.log(err);
    }
  };

  // 用useEffect监听bears变化，打印最新值
  useEffect(() => {
    console.log('当前bears数量:', bears);
  }, [bears]);

  return <div>{/* 组件渲染内容 */}</div>;
};

扩展store存储用户信息 #

针对你存储API返回用户信息的需求，修改Store.jsx添加用户相关状态和方法：

import create from 'zustand'

const useStoreZu = create(set => ({
  bears: 0,
  user: null, // 初始化用户信息为null
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  // 设置用户信息的方法
  setUser: (userData) => set({ user: userData }),
  // 清空用户信息的方法
  clearUser: () => set({ user: null })
}))

export default useStoreZu

然后在handleCallbackResponse中调用setUser存储用户数据：

const { setUser } = useStoreZu();

// 在try块获取server_session_token后
setUser({
  ...userObj, // 合并jwt解析的用户基础信息
  token: server_session_token.data // 添加API返回的会话token
});

关键注意事项 #

• 必须在React组件或自定义Hook中调用useStoreZu()，这样才能自动订阅状态变化，获取最新值。
• 不要在异步函数中直接依赖状态的快照值，如需跟踪状态变化，使用useEffect或在组件渲染中直接使用状态（比如渲染到页面上）。
• Zustand的set方法支持函数式更新（set(state => ...)），适合依赖旧状态计算新值的场景（比如你的increasePopulation）。

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