如何在UI中不显示Redux Toolkit的initialState初始数据？

核心解决步骤 #

你的初始测试内容来自initialState里预设的测试项，直接将初始状态改为空数组即可移除初始显示：

// 修改前
const initialState: TodolistState = [{
  id: Date.now(),
  title: 'test title',
  body: 'test body',
  done: false
}]

// 修改后
const initialState: TodolistState = []

额外修复：删除功能的潜在bug #

你的remove reducer当前存在逻辑问题：用数组索引作为id传入并执行splice，但如果待办项顺序变化（比如删除中间项），索引会和真实的todo id脱节，导致删除错误。正确写法应该通过todo的真实id定位后删除：

remove: (state, action: PayloadAction<{ id: number }>) => {
  const targetIndex = state.findIndex(todo => todo.id === action.payload.id);
  if (targetIndex !== -1) {
    state.splice(targetIndex, 1);
  }
}

同时在组件里调用remove时，要传入todo的真实id而非数组索引：

// 修改前
dispatch(remove({ id: index, done: true }))

// 修改后
dispatch(remove({ id: val.id }))

内容的提问来源于stack exchange，提问作者W.A Rajinda