React 依据表单输入校验控制提交按钮禁用启用时isEnabled始终为false的问题

• 状态引用路径完全错配，校验逻辑读取的状态与实际更新的状态没有关联
  你的事件处理函数里，所有输入的更新都是拆分成独立状态存储的：
  • 姓名更新调用setFirstName({ firstName: event.target.value })，值存在独立的firstName状态对象里
  • 邮箱更新调用setEmail({ email: event.target.value })，值存在独立的email状态对象里
  • 下拉选择更新调用setSelected({ country: event.target.value })，值存在独立的selected状态对象里
  • 同意条款更新调用setAgree(!agree)，值存在独立的agree布尔状态里
    同时事件处理逻辑还缺失公司输入的更新分支：校验逻辑要求公司输入有值，但handleChange里完全没有对应公司输入的处理代码，这个字段永远不会有有效值。
    更关键的是，你的canBeSubmitted函数完全没有读取这些独立状态，反而去读取一个从来没有被任何更新逻辑同步过的customerData对象下的字段，这些字段从组件初始化后就一直是初始空值，校验结果自然永远为false。
• 存在字段拼写错误
  校验逻辑里写的customerData.companeyState是拼写错误（正确拼写应为companyState），就算后续补上customerData的同步逻辑，这个字段也永远读不到有效值。
• 类型不匹配导致校验条件永远不成立
  你的下拉选项状态存储的是{ country: 选中值 }这样的对象结构，但校验逻辑写的是customerData.selected.length > 0：对象类型本身没有length属性，求值结果为undefined > 0，永远返回false。

• 统一校验读取的数据源：要么把所有状态值同步更新到customerData对象中，在事件处理里修改对应字段；要么直接把校验逻辑改成读取实际存在的独立状态值，修改后的示例代码如下：

  const canBeSubmitted = () => {
    return (
      firstName.firstName.trim().length > 0 &&
      email.email.trim().length > 0 &&
      // 修正拼写，对应实际的公司输入状态，补全事件处理里的公司输入更新分支
      company.company.trim().length > 0 &&
      selected.country.length > 0 &&
      agree === true
    )
  };
  const isEnabled = canBeSubmitted();
  

• 不需要修改复选框的事件逻辑：你在setAgree(!agree)之后立刻打印的agree值是更新前的旧值，这是React状态异步批处理的正常表现，不会影响状态本身的更新和后续的重渲染计算。

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