在setState未立即运行时验证表单

import React, { Component } from 'react';

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        name: '',
        email: '',
        password: ''
      },
      formErrors: {
        name: '',
        email: '',
        password: ''
      }
    };
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState(prevState => ({
      formData: {
        ...prevState.formData,
        [name]: value
      }
    }));
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const { formData } = this.state;
    const formErrors = {};

    // 验证name字段
    if (formData.name.trim() === '') {
      formErrors.name = '姓名不能为空';
    }

    // 验证email字段
    if (formData.email.trim() === '') {
      formErrors.email = '邮箱不能为空';
    } else if (!/^\S+@\S+\.\S+$/.test(formData.email)) {
      formErrors.email = '邮箱格式不正确';
    }

    // 验证password字段
    if (formData.password.trim() === '') {
      formErrors.password = '密码不能为空';
    } else if (formData.password.length < 6) {
      formErrors.password = '密码长度不能少于6位';
    }

    this.setState({ formErrors });

    // 如果表单验证通过，则可以进行提交操作
    if (Object.keys(formErrors).length === 0) {
      // 执行提交逻辑
      // ...
    }
  }

  render() {
    const { formData, formErrors } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>姓名：</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={this.handleChange}
          />
          {formErrors.name && <span>{formErrors.name}</span>}
        </div>
        <div>
          <label>邮箱：</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={this.handleChange}
          />
          {formErrors.email && <span>{formErrors.email}</span>}
        </div>
        <div>
          <label>密码：</label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={this.handleChange}
          />
          {formErrors.password && <span>{formErrors.password}</span>}
        </div>
        <button type="submit">提交</button>
      </form>
    );
  }
}

export default MyForm;