Redux操作时电影对象内actors数组元素未成功删除问题排查

问题原因 #

你现在的代码核心问题出在Reducer逻辑完全不匹配需求，同时Action携带的参数不足：

1. 你当前Reducer里的state对应的是整个movies数组，你写的过滤逻辑是「删除movies数组里和演员名相等的movie对象」，这显然和你要的「修改指定movie下的actors数组」完全不是一回事
2. 你的Action只传了要删除的演员名，没有携带要操作的movie的id，Reducer根本不知道应该修改哪个movie的演员列表

修复步骤 #

1. 修改组件调用Action的逻辑，传入movie id #

首先修正组件的参数解构（你原来的props解构写法错误），同时调用删除方法时传入movie.id：

// 修正参数解构，不需要在解构后额外加props参数
const PostList = ({ movie, removeActorFromMovie }) => {
  return (
    <div>
      <h3>Actors in film </h3>
      {movie.actors.map((actor, i) => (
        <div key={actor}>
          {actor}
          {/* 同时传入movie id和要删除的演员名 */}
          <button onClick={() => removeActorFromMovie({movieId: movie.id, actorName: actor})}>Usuń</button>
        </div>
      ))}
    </div>
  );
};

// 后面的mapStateToProps、mapDispatchToProps、connect逻辑保持不变即可

2. Action不需要改动，直接接收你传的对象作为payload即可 #

原来的Action代码可以正常使用：

export const removeActorFromMovie = (payload) => ({
  type: "MOVIE_ACTOR_DELETE",
  payload,
});

3. 重写Reducer对应case的逻辑 #

遍历整个movies数组，找到id匹配的movie，更新它的actors数组，其余movie原样返回，符合Redux不可变更新要求：

case "MOVIE_ACTOR_DELETE":
  return state.map(movie => {
    // 不是要操作的movie直接返回
    if (movie.id !== action.payload.movieId) return movie
    // 是目标movie，过滤掉要删除的演员，返回新对象
    return {
      ...movie,
      actors: movie.actors.filter(actor => actor !== action.payload.actorName)
    }
  })

修改完成后即可正常删除指定movie下的对应演员。

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