React-Redux应用中使用.filter无法更新状态的修复方法

你的代码问题在于没有返回处理后的新状态，你这里的deleteCompleted应该是reducer中的处理逻辑，Redux的reducer需要返回新的状态值来触发状态更新，而你的函数当前没有返回任何内容（箭头函数用大括号包裹时，必须显式写return）。

修复后的代码 #

// 显式返回过滤结果
deleteCompleted: state => {
  return state.filter(task => task.done === false);
}

// 或者更简洁的箭头函数写法（省略大括号自动返回）
deleteCompleted: state => state.filter(task => !task.done)

原因说明 #

1. Redux要求reducer是纯函数，不能直接修改原state，必须返回新的不可变状态。filter方法本身会返回一个新数组，不会修改原数组，符合要求。
2. 当箭头函数使用大括号{}包裹代码块时，不会自动返回结果，必须手动添加return语句，否则函数默认返回undefined，这时候Redux会保留原状态不更新。

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