Redux场景下对数组调用find方法返回null问题求助

问题原因 #

你触发两个action的顺序写反了：

1. 先执行了delete_todo，已经把对应id的待办项从state.todos数组里移除
2. 之后才执行completed_todo，这时候再去state.todos里查找已经被删除的id，自然返回null

另外completed_todo reducer里用filter匹配待办项也存在问题：filter返回的是数组，会导致你的completed数组变成二维数组，后续渲染会出错。

修复方案 #

方案1：调整action触发顺序+修正completed_todo逻辑 #

首先调整handleDelete里的dispatch顺序，先把待办项移到已完成列表，再删除原待办：

const handleDelete = (id) => {
  // 先处理已完成逻辑，此时待办项还在todos数组里
  dispatch(todoActions.completed_todo(id));
  // 再删除原待办
  dispatch(todoActions.delete_todo(id));
};

然后修正completed_todo reducer里的取值逻辑，把filter换成find取单个对象，Redux Toolkit支持直接修改state，不用手动解构数组：

completed_todo(state, action) {
  const targetTodo = state.todos.find((todo) => todo.id === action.payload);
  if (targetTodo) {
    state.completed.push(targetTodo);
  }
}

方案2：合并成单个action（更推荐） #

两个操作本来就是联动的，没必要拆成两次dispatch，直接合并成一个complete_and_delete action更合理，还能避免顺序写错的问题：

// reducer里新增action
reducers: {
  // 其他原有action保留
  complete_and_delete(state, action) {
    const targetTodo = state.todos.find((todo) => todo.id === action.payload);
    if (targetTodo) {
      state.completed.push(targetTodo);
      state.todos = state.todos.filter(todo => todo.id !== action.payload);
    }
  }
}

// 业务代码里直接触发这一个action即可
const handleDelete = (id) => {
  dispatch(todoActions.complete_and_delete(id));
};

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