React复选框多选useState状态更新及必填校验异常排查

代码存在4处核心错误，直接触发你描述的异常：

• 取消选中时直接修改state原数组：React要求state不可变，splice会直接修改原coverageTime数组，无法触发React正确的状态更新，且取消逻辑读取的是闭包缓存的旧状态值，不是最新的选中结果
• 选中逻辑缺少重复校验：每次勾选都直接向数组追加值，没有判断当前选项是否已存在，导致重复值被反复添加
• 状态更新异步导致校验失效：setCoverageTime是异步执行的，调用后立刻执行checkSize拿到的是更新前的旧状态，校验结果完全不准；且checkSize没有处理「有选中值时启用按钮」的逻辑，哪怕选了值按钮也会保持禁用
• 复选框为非受控组件：input标签没有绑定value和checked属性，UI选中状态和state存储的值没有双向同步，很容易出现显示和实际值不一致的问题

1. 重写onChange逻辑，全程使用函数式更新保证拿到最新状态，不直接修改原数组，新增重复值判断
2. 删除冗余的checkSize方法，用useEffect监听答案数组变化，自动更新按钮禁用状态，避免异步状态读取问题
3. 给复选框补上value和checked属性绑定，做成受控组件，保证UI和状态完全同步
4. 简化提交逻辑，按钮禁用状态已经做了前置拦截，提交时不需要重复做空判断

import { useState, useEffect } from 'react';
// 其余import保持原有逻辑不变

function CoverageTime(props) {
  const navigate = useNavigate();
  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
  const [coverageTime, setCoverageTime] = useState([]);

  // 监听答案变化自动更新按钮状态
  useEffect(() => {
    setIsButtonDisabled(coverageTime.length === 0);
  }, [coverageTime]);

  function onChange(e) {
    const { value, checked } = e.target;
    setCoverageTime(prev => {
      if (checked) {
        // 已存在的值不重复添加
        return prev.includes(value) ? prev : [...prev, value];
      } else {
        // 返回新数组，不修改原状态
        return prev.filter(item => item !== value);
      }
    });
  };

  function nextStep(e) {
    e.preventDefault();
    navigate('/form/coverage-time-2');
  }

  // checkBoxes配置数组保持原有内容不变

  return (
    <div className="bg-[#F3F5FF] ">
      <ToastContainer limit={1} autoClose={3000} closeOnClick={true} pauseOnFocusLoss={false} position="top-center" theme="colored" />
      <div className="formArea flex items-center justify-center py-5 px-4 sm:px-6 lg:px-4">
        <div className="max-w-lg w-full space-y-8">
          <div>
            <h2 className="mt-4 text-center text-4xl font-extrabold text-gray-900">
              Tell us about yourself
            </h2>
            <p className="text-center text-md font-medium text-gray-500">
              Select All That Apply
            </p>
          </div>
          <form className="mt-8 space-y-6">
            <div className="w-full space-y-6 relative flex justify-center leading-5">
                <div className=" leading-5 buttonBlock">
                {checkBoxes.map((checkBox) => (
                     <div className="relative flex items-start py-4">
                     <div className="ml-3 flex items-center h-5">
                       <input
                         id={checkBox.id}
                         name={checkBox.id}
                         type="checkbox"
                         value={checkBox.value}
                         checked={coverageTime.includes(checkBox.value)}
                         className="focus:ring-blue-500 h-6 w-6 text-blue-600 border-gray-300 rounded mr-5"
                        onChange={onChange}
                       />
                       <label className="font-medium text-md text-gray-600">
                         {checkBox.title}
                       </label>
                     </div>
                   </div>
                  ))}
              </div>
            </div>
            <button
              type="submit"
              disabled={isButtonDisabled}
              className={`px-6 py-4 w-full  ${isButtonDisabled ? 'cursor-not-allowed disabled:opacity-75 bg-gray-500' : ""} ripple-bg-blue-200 text-lg bg-blue-400 hover:shadow-lg hover:shadow-blue-300/50 text-white rounded transition duration-200 zipSubmit  items-center align-middle flex flex-row text-center justify-center`}
              id='address'
              onClick={nextStep}
            >
                Next
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-auto pl-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2}
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M13 7l5 5m0 0l-5 5m5-5H6"
                    />
                </svg>
            </button>
            <LinkWithQuery to="/">Back</LinkWithQuery>
          </form>
        </div>
      </div>
      <BottomPhone />
    </div>
  )
}
export default CoverageTime;

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