React Redux使用Slice删除单个待办项失败及map报错问题求助

核心问题定位 #

出现Uncaught TypeError: Cannot read properties of undefined (reading 'map')的根本原因是组件中用于渲染的todos变量为undefined，而删除无效通常是filter逻辑或参数传递错误导致。

排查与修复步骤 #

1. 检查TodoSlice的removeTodo reducer逻辑 #

这是最常见的错误点，需确保reducer正确维护state结构：

• 错误写法1：直接返回过滤后的数组，破坏原state结构

// 错误：返回数组导致slice状态变成数组，而非原{todos: [...]}结构
removeTodo: (state, action) => {
  return state.todos.filter(todo => todo.id !== action.payload)
}

• 错误写法2：仅调用filter但未赋值给state

// 错误：filter返回新数组但未更新state，todos无变化
removeTodo: (state, action) => {
  state.todos.filter(todo => todo.id !== action.payload)
}

• 正确写法（Redux Toolkit的immer支持直接修改state）：

removeTodo: (state, action) => {
  // 直接将state.todos替换为过滤后的新数组，immer自动处理不可变更新
  state.todos = state.todos.filter(todo => todo.id !== action.payload)
}

或不依赖immer的写法：

removeTodo: (state, action) => {
  return {
    ...state,
    todos: state.todos.filter(todo => todo.id !== action.payload)
  }
}

2. 确认组件中todos的获取路径正确 #

确保从store中正确提取todos，路径需与slice的name对应：
假设你的slice定义为name: 'todo'，初始状态是{ todos: [] }，则组件中应这样获取：

// 正确：从state.todo下取todos属性
const todos = useSelector(state => state.todo.todos)

如果写成const todos = useSelector(state => state.todos)，会导致todos为undefined（因为store中顶层没有todos属性，只有todo slice）。

3. 验证removeTodo action的参数传递 #

确保调用dispatch(removeTodo())时传入的是待办项的id而非整个对象或undefined：

// 正确：传递todo的id
<button onClick={() => dispatch(removeTodo(todo.id))}>删除</button>

如果传递的是整个todo对象，需在reducer中改为todo.id !== action.payload.id，否则filter无法匹配，删除无效。

4. 检查slice的初始状态 #

确保slice的初始状态是包含todos数组的对象，而非直接数组：

// 正确的初始状态
const initialState = {
  todos: []
}

若初始状态直接设为数组，后续reducer处理容易破坏结构，导致todos获取异常。

完整正确示例 #

TodoSlice.js #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  todos: []
}

const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push({
        id: Date.now(),
        text: action.payload
      })
    },
    removeTodo: (state, action) => {
      state.todos = state.todos.filter(todo => todo.id !== action.payload)
    }
  }
})

export const { addTodo, removeTodo } = todoSlice.actions
export default todoSlice.reducer

Todos.js #

import { useSelector, useDispatch } from 'react-redux'
import { removeTodo } from './TodoSlice'

export default function Todos() {
  const todos = useSelector(state => state.todo.todos)
  const dispatch = useDispatch()

  return (
    <div className="todos-list">
      {todos.map(todo => (
        <div key={todo.id} className="todo-item">
          <span>{todo.text}</span>
          <button onClick={() => dispatch(removeTodo(todo.id))}>删除</button>
        </div>
      ))}
    </div>
  )
}

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