如何在Zustand中更新对象数组？遇store未定义问题求助

我尝试更新Zustand store里的MasterSteps数组变量，却收到store未定义、进而MasterSteps未定义的报错。但用相同写法的setRoute方法可以正常工作，routeKey变量能成功设置。相关代码如下：

const useStore = create((set) => ({
    ...initialState,
    routeKey: "",
    MasterSteps: [],
    setRoute: (routeKeyToUse) => {
        set((state) => {
            state.routeKey = routeKeyToUse;
        })
    },
    setMasterSteps: (o) => {
        set((state) => {
            state.MasterSteps= [...state.MasterSteps, o ]
        })
    },
}));

注：setMasterSteps的参数o包含有效数据，想知道如何在Zustand store里正确更新数组状态。

解决方法 #

1. 遵循Immutable更新规范（推荐） #

Zustand虽然支持直接修改state的mutate写法，但数组作为引用类型，直接修改容易引发状态不同步问题。更稳妥的方式是返回新的状态对象：

setMasterSteps: (o) => {
    set((state) => ({
        ...state,
        MasterSteps: [...state.MasterSteps, o]
    }))
},

这种方式会创建新的数组和状态对象，确保Zustand能正确追踪状态变化。

2. 若使用mutate写法，确保操作正确 #

如果坚持用直接修改的方式，需确保操作后Zustand能感知到变化（无需返回值）：

setMasterSteps: (o) => {
    set((state) => {
        state.MasterSteps.push(o);
    })
},

3. 检查组件中调用方法的方式 #

必须通过useStore钩子获取setMasterSteps方法，不能直接调用：

// 组件内正确获取方式
const setMasterSteps = useStore(state => state.setMasterSteps);

// 调用时
setMasterSteps(yourValidData);

如果跳过钩子直接调用，就会出现store未定义的错误。

4. 排查初始状态覆盖问题 #

确认initialState中没有和MasterSteps同名的变量，避免初始状态被意外覆盖，导致MasterSteps未初始化。

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