Redux中如何给对象数组内指定电影的actors数组新增演员数据

问题核心原因 #

你的代码存在两处关键错误：

1. 提交addActorToMovie时没有传递要修改的电影ID，且直接把Formik返回的整个表单对象{actor: 'xxx'}作为载荷
2. Reducer中对MOVIEACTOR_ADD的处理逻辑完全错误：你的movieReducer初始state是存储所有电影的数组，但当前写法直接将数组改为了包含actors字段的对象，完全破坏了原有的state结构

具体修改步骤 #

1. 修改表单提交逻辑

调整handleSubmit函数，传递目标电影ID和选中的演员值到action：

const handleSubmit = (values) => {
  // 传递目标电影id + 选中的演员名，不要直接传整个values对象
  addActorToMovie({
    movieId: movie.id,
    actor: values.actor
  });
  history.push(`/movies/${movie.id}`);
};

2. 修正Reducer的MOVIEACTOR_ADD分支

遍历电影数组，仅修改对应ID的电影的actors数组，追加新演员而非替换整个结构：

export const movieReducer = (state = [], action) => {
  switch (action.type) {
    case "MOVIE_ADD":
      return [...state, action.payload];
    case "MOVIE_DELETE":
      return [...state.filter((el) => el.id !== action.payload.id)];
    case "MOVIEACTOR_ADD":
      // 遍历所有电影，找到对应id的电影做更新
      return state.map(movieItem => {
        if (movieItem.id === action.payload.movieId) {
          return {
            ...movieItem,
            // 新演员追加到原actors数组末尾，不要直接替换
            actors: [...movieItem.actors, action.payload.actor]
          }
        }
        // 非目标电影直接返回原对象
        return movieItem
      })
    default:
      return state;
  }
};

3. 检查Action创建函数（如果存在的话）

确保addActorToMovie能正确接收参数并返回符合格式的action：

export const addActorToMovie = (payload) => ({
  type: "MOVIEACTOR_ADD",
  payload
})

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