Zustand中更新存储对象参数值的问题：已评分电影状态管理函数异常求助

我来帮你梳理下代码里的核心问题，然后给出可直接运行的修复方案：

1. IF分支的崩溃原因 #

你用findIndex拿到的是数字类型的索引值，但之后却尝试给这个数字添加userRating属性（index.userRating = rating.userRating）——数字是原始类型，根本不能添加属性，这就是你看到TypeError: Cannot create property 'userRating' on number '0'的直接原因。另外，你返回[index, ...state.ratedMovies]的逻辑完全错误，这会把索引数字插到数组开头，根本没更新目标电影的评分。

2. ELSE分支无法添加新评分的原因 #

Zustand的set函数要求你返回完整的新状态对象，但你直接返回了数组[rating, ...state.ratedMovies]，这会把整个store的状态从包含ratedMovies的对象替换成数组，后续再访问state.ratedMovies就会出错，导致新元素无法正确添加。

修复后的完整代码 #

这里是修正后的addUserRating函数，完全遵循Zustand的immutable更新原则：

addUserRating: (rating) => {
  console.log("rating object", rating);
  set((state) => {
    // 查找目标电影在数组中的索引
    const existingMovieIndex = state.ratedMovies.findIndex(
      (movie) => movie.imdbID === rating.imdbID
    );

    if (existingMovieIndex !== -1) {
      console.log("add rating IF");
      // 1. 复制原数组，避免直接修改原状态（immutable要求）
      const updatedRatedMovies = [...state.ratedMovies];
      // 2. 复制目标电影对象并更新评分，不修改原对象
      updatedRatedMovies[existingMovieIndex] = {
        ...updatedRatedMovies[existingMovieIndex],
        userRating: rating.userRating,
      };
      // 3. 返回完整的新状态对象，保持结构一致
      return { ...state, ratedMovies: updatedRatedMovies };
    } else {
      console.log("add rating ELSE");
      // 添加新评分，同样返回完整的新状态对象
      return {
        ...state,
        ratedMovies: [rating, ...state.ratedMovies], // 若想把新评分加到数组末尾，改成 [...state.ratedMovies, rating]
      };
    }
  });
}

关键修复点说明 #

• 坚持immutable更新：始终创建原数组/对象的副本，不直接修改原状态，这是Zustand（以及大多数现代状态管理库）的最佳实践，能避免很多奇怪的状态同步问题。
• 返回完整状态对象：无论更新还是新增操作，都返回{ ...state, ratedMovies: 新数组 }，确保store的状态结构始终是包含ratedMovies的对象，不会被意外替换成数组。
• 正确处理索引：找到目标索引后，通过数组副本修改对应位置的元素，而不是去操作索引数字本身。

另外，确保你的初始store状态结构是正确的，比如：

import { create } from "zustand";

const useRatedMoviesStore = create((set) => ({
  ratedMovies: [], // 初始为空数组
  addUserRating: /* 上面的修复后函数 */
}));

这样修改后，你的评分修改和新增功能应该都能正常工作了。

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