React表单验证中多次调用this.setState仅最后一次生效的问题求助

我一眼就看出问题所在啦——你这里踩了React setState异步更新的坑！

问题根源 #

React的setState是异步且批量执行的，当你在validateRegister里连续多次调用setState({...this.state, xxxError: 'xxx'})时，每一次调用都是基于当前还没更新的旧state来合并新状态。举个例子：

• 第一次判断用户名不符合，你基于旧state（所有错误都是空）设置了nameError；
• 第二次判断地址为空，又基于同样的旧state设置addressError，这时候第一次设置的nameError就被覆盖掉了；
• 以此类推，最后只有最后一次设置的passError会被保留，前面的所有错误状态都被后续的setState覆盖了。

另外还要提一句：你代码里的密码判断逻辑有问题！原条件!this.state.password.length>=8||!this.state.password.length<=12因为运算符优先级（!比比较运算符高），实际逻辑和你想要的“密码长度不在8-12之间”不符，得修正。

修复方案 #

最优雅高效的方式是先收集所有错误到一个对象里，然后只调用一次setState，这样就不会有覆盖问题了，同时修正密码的判断逻辑：

validateRegister = () => { 
  let hasError = false;
  const errors = {};

  // 用户名验证
  if (this.state.username.length < 3) {
    errors.nameError = 'Name must be atleast 3 characters long!';
    hasError = true;
  }
  // 地址验证
  if (this.state.address.length === 0) {
    errors.addressError = 'Address cannot be empty!';
    hasError = true;
  }
  // 手机号验证
  if (this.state.phone.length !== 10) {
    errors.phoneError = 'Phone no should be 10 digits long!';
    hasError = true;
  }
  // 邮箱验证
  if (this.state.email === '') {
    errors.emailError = 'Email cannot be empty!';
    hasError = true;
  }
  // 密码验证（修正逻辑）
  if (this.state.password.length < 8 || this.state.password.length > 12) {
    errors.passError = 'Password should be between 8-12 characters!';
    hasError = true;
  }

  // 一次性更新所有错误状态
  if (hasError) {
    this.setState(prevState => ({ ...prevState, ...errors }));
  }

  setTimeout(() => { console.log(this.state); }, 2000);
  return hasError;
}

为什么这样可行？ #

我们先把所有需要设置的错误信息收集到errors对象中，最后只调用一次setState，用展开运算符把所有错误合并到当前state里，这样所有错误状态都会被正确设置，不会互相覆盖。另外使用prevState作为参数是更严谨的写法，确保我们是基于最新的状态进行更新。

这样修改后，当你不填任何字段提交表单时，所有错误信息都会被正确设置到state里啦！

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