如何使用useState移除状态元素？复选框取消勾选状态未正确更新

你当前else分支的逻辑存在两个问题：一是e.target.checked是布尔值，无法调用数组的filter方法；二是你的需求是从对象中移除对应属性，而非修改属性值。

以下是两种可行的修复方案：

方案一：解构赋值删除目标属性 #

这种方式简洁直观，通过解构语法排除要删除的属性，剩余属性组成新状态对象：

const [checkedState, setCheckedState] = useState({});

const handleOnChange = (e) => {
  const { name, checked } = e.target;
  if (checked) {
    // 使用函数式更新确保获取最新状态
    setCheckedState(prevState => ({ ...prevState, [name]: checked }));
  } else {
    // 解构出要删除的属性，剩余属性构成新状态
    const { [name]: _, ...newCheckedState } = checkedState;
    setCheckedState(newCheckedState);
  }    
};

方案二：通过Object.fromEntries过滤属性 #

如果需要更灵活的属性过滤逻辑，可以用这种方式：

const [checkedState, setCheckedState] = useState({});

const handleOnChange = (e) => {
  const { name, checked } = e.target;
  if (checked) {
    setCheckedState(prevState => ({ ...prevState, [name]: checked }));
  } else {
    setCheckedState(prevState => 
      Object.fromEntries(
        Object.entries(prevState).filter(([key]) => key !== name)
      )
    );
  }    
};

两种方案都能实现需求：取消documentary勾选后，checkedState会变为{action/adventure: true}。另外建议使用函数式更新（prevState），避免状态更新时出现 stale state 问题，尤其是在频繁操作复选框的场景下。

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