React中如何正确删除state里指定id对应的对象属性？

API 探路者

2026-9-30

问题原因

你的代码存在两个核心问题：

语法错误：delete是独立的操作语句，不能直接放置在对象字面量的键值对声明位置，你的写法不符合JS对象构造的语法规则。
违反Redux不可变原则：Redux reducer要求不能直接修改原state对象，直接对state.Items执行delete操作会修改原状态，可能引发渲染不更新、状态变更异常等问题。

正确实现方案

方案1：先复制对象再删除（兼容性好）

先对原Items对象做浅拷贝，再对拷贝后的对象执行删除操作，最后返回新状态：

case DELETE_OBJ:    
  // 浅拷贝原Items对象，避免修改原state
  const newItems = {...state.Items};
  // 删除指定id对应的属性，动态id可替换为action.payload等变量
  delete newItems['id1'];
  return {
    ...state,
    Items: newItems
  };

方案2：解构排除法（更简洁，推荐）

利用ES6对象解构语法，直接把不需要删除的属性收集为新对象，无需使用delete操作：

case DELETE_OBJ:    
  // 排除id1属性，剩余属性存入restItems
  const { id1, ...restItems } = state.Items;
  return {
    ...state,
    Items: restItems
  };

如果要删除的id是动态值（比如从action的payload中传入），可以用计算属性的写法：

case DELETE_OBJ:    
  const targetId = action.payload;
  // 用下划线做占位符，不需要使用被删除的属性值
  const { [targetId]: _, ...restItems } = state.Items;
  return {
    ...state,
    Items: restItems
  };