React中如何移除useState状态对象的动态键值对

先修正你代码里的语法错误：setCheckedItems的入参回调括号位置写反了，正确的回调包裹方式是把箭头函数整体放在setCheckedItems的括号里。

要移除键名动态变化的属性，最符合React不可变更新规范的写法是用对象解构+计算属性名，直接在生成新状态时把目标键剔除，不需要额外依赖工具函数。
核心逻辑：解构旧状态时，通过计算属性名[id]匹配到键名等于传入id的属性，把它单独拆分出来，剩下的所有属性用rest操作符收集为新对象，这个新对象就是已经移除了目标键的最终状态。

修正后的完整可运行代码：

// 建议把初始值从null改成空对象，避免后续空值操作报错
const [checkedItems, setCheckedItems] = useState({})

const unCheckItem = (item) => {
  const { id } = item
  setCheckedItems((prevState) => {
    // 空值兜底，兼容初始值为null的场景
    if (!prevState) return {}
    // 剔除键名为当前id的属性
    const { [id]: _removed, ...restChecked } = prevState
    return restChecked
  })
}

注意事项 #

• 这种写法完全不会修改原有的prevState对象，符合React状态不可变的要求，不会引发隐式的渲染异常
• 不要直接在prevState上用delete删属性：直接修改原状态会打破React的状态对比逻辑，就算你调用了setCheckedItems也可能不触发重渲染。如果要兼容不支持对象rest语法的老旧构建环境，可以先浅拷贝旧状态再在副本上删除：

const unCheckItem = (item) => {
  const { id } = item
  setCheckedItems((prevState) => {
    if (!prevState) return {}
    const newState = { ...prevState }
    delete newState[id]
    return newState
  })
}

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