Zustand状态中操作对象内数组时提示user对象不存在问题排查

数据老陈

2026-7-15

问题排查与修复

核心问题

你的setFavoriteMovie函数存在嵌套状态更新的语法错误，Zustand无法识别直接修改嵌套属性的写法，必须通过创建新对象的方式更新嵌套状态。

错误原因

在Zustand的set回调中，你直接尝试修改user.favoriteMovies，但这种写法不符合状态更新规则：

set函数需要返回一个新的state片段，嵌套对象必须通过展开运算符生成新对象，不能直接修改原属性。
代码中user.favoriteMovies的写法属于无效语法，因为在返回的对象字面量中，无法直接引用外层的user，必须基于state参数中的user构建新对象。

修复后的代码

import { create } from "zustand";
import { UserObject } from "../pages/login";

interface Store {
  user: UserObject;
  setUser: (data: UserObject) => void;
  setFavoriteMovie: (id: number) => void;
}

const emptyUserObject = {
  username: "",
  email: "",
  name: "",
  favoriteMovies: [],
};

const userStore = create<Store>((set) => ({
  user: emptyUserObject,
  setUser: (data: UserObject) => {
    set(() => ({ user: data }));
  },
  setFavoriteMovie: (id: number) => {
    set((state) => ({
      // 生成新的user对象，复用原有属性，更新favoriteMovies数组
      user: {
        ...state.user,
        favoriteMovies: [...state.user.favoriteMovies, id],
      },
    }));
  },
}));