React复选框取消勾选后仍提交至服务器问题求助

你的代码存在两个关键错误，直接导致了当前的问题：

1. 取消勾选时的数组调用错误：你在else分支里错误使用了setTime.filter——setTime是React的state更新函数，并非当前的数组状态，应该基于time（或通过函数式更新获取最新state）来执行过滤操作。
2. state更新的闭包陷阱：直接依赖time变量更新state时，由于React state更新是异步的，快速多次操作复选框可能会拿到旧的state值，进而导致重复添加或删除不生效。

修复后的完整代码如下：

const [time, setTime] = useState([]);

function handleChangeTime(e) {
  const selectedValue = e.target.value;
  // 函数式更新确保拿到最新的state
  setTime(prevTime => {
    if (e.currentTarget.checked) {
      // 先判断值是否已存在，避免重复添加
      if (!prevTime.includes(selectedValue)) {
        return [...prevTime, selectedValue];
      }
      return prevTime;
    } else {
      // 过滤掉要取消的选项值
      return prevTime.filter(item => item !== selectedValue);
    }
  });
}

console.log(time);

// JSX部分保持不变
<h4>Select the best time:</h4>
<form>
  <label>
      <input
      type="checkbox"
      name="time"
      onChange={handleChangeTime}
      value="9:00" />
      9:00 a.m
  </label>
  <label>
      <input
      type="checkbox"
      name="time"
      onChange={handleChangeTime}
      value="9:30" />
      9:30 a.m
  </label>
  <label>
      <input
      type="checkbox"
      name="time"
      onChange={handleChangeTime}
      value="10:00" />
      10:00 a.m
  </label>
</form>

核心修改说明： #

• 改用setTime(prevTime => {...})的函数式更新方式，保证每次更新都基于最新的state值，规避闭包问题。
• 勾选操作时增加!prevTime.includes(selectedValue)判断，防止同一选项值被重复添加到数组中。
• 取消勾选时，正确使用prevTime.filter生成新数组，移除对应的选项值。

修改后，复选框的勾选/取消操作会正确同步到time数组，不会再出现取消后值仍残留、重复提交的问题。

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