Redux Toolkit中state.filter无法过滤数组的问题求助

你的目标追踪器删除功能失效，核心有两个原因：

1. Redux Toolkit中数组更新方式错误 #

state.push能生效是因为它直接修改了原数组，Redux Toolkit内置的Immer工具会通过Proxy捕获这个修改，自动转换成符合Redux要求的不可变更新。

但Array.filter()是返回一个新数组，不会修改原数组。你当前的代码只是调用了state.filter(...)，但没有将返回的新数组赋值给state，所以原状态完全没变化。

修正reducer的两种方式： #

方式一：直接返回过滤后的新数组（推荐，更符合不可变思维）

deleteGoal: (state, action) => {
  const goalId = action.payload;
  // 返回新数组替换原state
  return state.filter((goal) => goal.id !== goalId);
}

方式二：使用splice直接修改原数组（Immer支持这种可变写法）

deleteGoal: (state, action) => {
  const goalId = action.payload;
  const targetIndex = state.findIndex(goal => goal.id === goalId);
  if (targetIndex !== -1) {
    state.splice(targetIndex, 1);
  }
}

2. 触发删除时传递的参数不匹配 #

你的组件中，onDoubleClick事件的参数是事件对象（你错误命名为goal），并且传递的是目标文本goal.target.textContent，但reducer里是用goal.id来过滤的——文本和id类型、值都不匹配，导致过滤条件永远为真，没有元素被移除。

修正组件代码： #

<Text fontSize="3xl" fontWeight={600}>your goals:</Text>
{goals.map((goal) => (
  <li 
    key={goal.id} {/* 推荐用唯一id作为key，不要用index */}
    onDoubleClick={() => {
      // 直接传递当前目标的id，而不是文本
      dispatch(deleteGoal(goal.id));
    }}
    className='goal-text'
  >
    {goal.input}
  </li> 
))}

另外注意：不要用数组index作为key，当数组元素增删时会导致渲染异常，改用每个目标唯一的goal.id更可靠。

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