提交React表单时触发验证错误，已填内容仍提示字段不能为空

问题根因 #

• 初始化state.data类型错误：你将data初始化为数组[]，但实际使用时是当做对象存储键值对，虽然JS不会报错，但不符合预期，也容易引发后续取值问题。
• 事件绑定不匹配：输入框的onChange属性绑定的是handleChangeData方法，但你代码中定义的输入处理方法名为handledegreeChanged，输入内容时根本不会触发你写的状态更新逻辑，导致存储的degree值始终为空。
• 状态更新逻辑错误：即使事件绑定正确，你现有的handledegreeChanged方法也只更新了state.degree，没有同步更新state.data，而验证方法handleValidations读取的是state.data["degree"]，自然会判定为空。
• 数据源不统一：验证逻辑读取state.data["degree"]，但提交表单时构造的参数读取的是state.degree，两处数据源不一致很容易出现逻辑冲突。

修复方案 #

1. 修正state初始化 #

将data初始化为空对象：

state = {
  degree: "",
  data: {}, // 从[]改为{}
  errors: {},
};

2. 修正输入框的事件绑定 #

保证onChange绑定的方法名和你定义的处理方法一致：

<input
  onChange={this.handledegreeChanged.bind(this, "degree")}
  value={this.state.data["degree"]}
  type="text"
  ref="degree"
  className="form-control form-input"
  id="inputdegree"
  placeholder="Degree"
  required
/>

3. 修正状态更新逻辑 #

修改handledegreeChanged方法，同步更新state.data和state.degree，移除重复的setState调用：

handledegreeChanged = (field, e) => {
  // 浅拷贝state.data避免直接修改原state
  const newData = {...this.state.data};
  newData[field] = e.target.value;
  this.setState({
    data: newData,
    degree: e.target.value
  });
};

4. 统一验证和提交的数据源（可选优化） #

为了避免后续再出现数据源不一致的问题，建议将验证逻辑的判断条件和提交参数统一使用同一个字段，比如修改handleValidations的判断逻辑，直接读取你提交时用的state.degree：

handleValidations() {
  let errors = {};
  let formIsValid = true;

  if (!this.state.degree) {
    formIsValid = false;
    errors["degree"] = "Cannot be empty";
  }

  this.setState({
    errors: errors,
  });
  return formIsValid;
}

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