Redux Toolkit删除单个store条目时全量清除数据如何修复

问题原因排查 #

• 核心写法错误：Array.filter()是纯函数，不会修改原数组，只会返回符合过滤条件的新数组，你当前代码只执行了过滤操作，没有将结果赋值回state.comment.comments，状态实际上没有被更新。
• 参数解构匹配错误：如果你此前尝试过dispatch(deleteCommentsSuccess(id))的写法，此时action.payload就是id本身，不是包含commentId字段的对象，用const { commentId } = action.payload解构会得到undefined，会导致过滤逻辑异常，出现所有评论被清空的问题。
• 类型不匹配问题：从DOM的data-id属性取到的id一定是字符串类型，如果你store中评论的_id是Number类型，全等判断!==会判定所有元素都不符合匹配条件，最终过滤得到空数组，所有评论被删除。
• 初始值缺失风险：你的初始state中comment是空对象，未加载评论时state.comment.comments为undefined，此时执行删除操作会抛出报错。

修复方案 #

1. 修正slice中的reducer逻辑 #

将过滤后的新数组赋值回状态，同时做类型兼容处理，避免类型不一致导致匹配失败：

deleteCommentsSuccess: (state, action) => {
  const { commentId } = action.payload
  // 赋值过滤结果 + 转字符串后比较，兼容不同类型的id
  state.comment.comments = state.comment.comments.filter((item) => String(item._id) !== String(commentId))
  state.loading = false
  state.error = false
},

如果你要使用直接传id的调用方式dispatch(deleteCommentsSuccess(id))，对应修改reducer的取值逻辑即可：

deleteCommentsSuccess: (state, action) => {
  const commentId = action.payload
  state.comment.comments = state.comment.comments.filter((item) => String(item._id) !== String(commentId))
  state.loading = false
  state.error = false
},

2. 优化id获取逻辑（可选） #

用更规范的dataset语法获取自定义属性，可根据你的_id类型做对应转换：

const handleDelete = async (e) => {
  e.preventDefault()
  const del_id = e.currentTarget.dataset.id
  // 如果你的_id是数字类型，统一转成数字
  // const del_id = Number(e.currentTarget.dataset.id)
  dispatch(deleteComment(del_id))
}

3. 完善初始state（可选） #

给comment加默认的空comments数组，避免未加载评论时执行删除操作报错：

initialState: {
  comment: {
    comments: []
  },
  loading: false,
  error: false,
},

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