React Native Redux Toolkit filter方法失效 调用state.shippers.find报类型错误

问题根本原因 #

错误出在Redux Toolkit reducer的返回值不符合状态结构要求：

• RTK的reducer支持两种更新逻辑：要么直接修改被Immer代理的state属性，要么返回一个完整的新状态对象覆盖原有状态
• 你的原始状态结构是包含shippers属性的对象：{shippers: []}，但在删除分支里直接返回了filter得到的数组，导致整个state直接被替换为这个数组，不再包含shippers属性
• 第二次触发reducer时，state已经是数组类型，访问state.shippers得到undefined，调用.find()方法自然抛出类型错误，和你遇到的报错完全吻合。同时你第二次点击的状态日志直接输出数组而非带shippers的对象，也验证了这一点。

修复方案 #

修改删除分支的逻辑，两种写法二选一即可：

写法1：直接修改state（推荐，符合RTK使用习惯） #

if(typeof shipperExists !== 'undefined') {
  // 直接给state.shippers赋值过滤后的数组，不需要return
  state.shippers = state.shippers.filter(el => el.id !== action.payload.id)
} else {
  state.shippers.push(action.payload)
}
// 这里的log只有不走return的时候才会执行，调整位置可以看全量日志
console.log(current(state.shippers));

写法2：返回完整状态对象 #

if(typeof shipperExists !== 'undefined') {
  // 返回和原始结构一致的完整状态对象，不要只返回数组
  return {
    ...state,
    shippers: state.shippers.filter(el => el.id !== action.payload.id)
  }
} else {
  state.shippers.push(action.payload)
}
console.log(current(state.shippers));

另外你当前代码中删除分支return之后的console.log永远不会执行，调整位置可以打印完整的状态变更日志。

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