如何通过复选框变更变量值？取消勾选时移除值的实现问题

你的代码存在两个核心问题，导致取消勾选时无法正确移除对应值：

1. 判断条件错误：复选框没有unchecked属性，你应该用!e.target.checked来判断取消勾选的状态
2. 数组更新逻辑错误：setSpecOrder([specOrder, ""])会把原数组和空字符串拼接成二维数组，而非移除目标值

修正后的handleChange函数 #

推荐使用函数式更新（依赖prevState）来处理状态，避免异步更新导致的逻辑错误，同时添加去重逻辑防止重复添加：

function handleChange(e) {
  const value = e.target.value;
  if (e.target.checked) {
    // 勾选时：如果值不存在则添加，避免重复
    setSpecOrder(prevState => {
      if (!prevState.includes(value)) {
        return [...prevState, value];
      }
      return prevState;
    });
  } else {
    // 取消时：过滤掉当前值
    setSpecOrder(prevState => prevState.filter(item => item !== value));
  }
}

逻辑说明 #

• 勾选状态：先检查数组中是否已存在当前值，不存在则通过扩展运算符创建新数组并添加值
• 取消状态：使用filter方法创建不包含当前值的新数组，实现移除效果

另外，你在map循环里把specOrder直接渲染为<p>{specOrder}</p>，可以改成更友好的展示方式：

<p>{specOrder.join(', ')}</p>

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