关于react类组件setState的问题答案

【问题标题】：Question about react class component setState关于react类组件setState的问题
【发布时间】：2021-03-04 12:49:47
【问题描述】：

这部分代码我没看懂：

this.setState({ usernameValid, errorMsg }, this.validateForm);

如果我们在状态下更新usernameValid、errorMsg，this.validateForm 会做什么？因为我们是在setState 的对象之外写的。

我的代码：

class StandardForm extends Component {
      state = {
        username: "",
        usernameValid: false,
        email: "",
        emailValid: false,
        password: "",
        passwordValid: false,
        passwordConfirm: "",
        passwordConfirmValid: false,
        formValid: false,
        errorMsg: {},
      };

  validateForm = () =>{
    let { usernameValid, emailValid, passwordValid, passwordConfirmValid} = this.state;
    this.setState({
      formValid: usernameValid && emailValid && passwordValid && passwordConfirmValid
    })
  }

  validateUsername = () => {
    const { username } = this.state;
    let usernameValid = true;
    let errorMsg = { ...this.state.errorMsg };

    if (username.length < 6 || username.length > 16) {
      usernameValid = false;
      errorMsg.username = "Username should be between 6 and 15 characters";
    }
    this.setState({ usernameValid, errorMsg }, this.validateForm);
  };

  validateEmail = () => {
    const { email } = this.state;
    let emailValid = true;
    let errorMsg = { ...this.state.errorMsg };

    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      emailValid = false;
      errorMsg.email = "Invalid email format";
    }

    this.setState({ emailValid, errorMsg }, this.validateForm);
  };

  validatePassword = () =>{
    const { password } = this.state;
    let passwordValid = true;
    let errorMsg = {...this.state.errorMsg}

    if(password.length < 8){
    let passwordValid = false;
      errorMsg.password = "Password should have at least 8 characters"
    }

    this.state({passwordValid, errorMsg})
  }

  confirmPassword  = () =>{
    const { confirmPassword, password } = this.state.confirmPassword
    let passwordConfirmValid = true; 
    let errorMsg = {...this.state.errorMsg}

    if(password !== confirmPassword){
    let passwordConfirmValid = false; 
        errorMsg.passwordConfirm = "Password do not match"
    }

    this.state({passwordConfirmValid, errorMsg})
    
  }

【问题讨论】：

标签： reactjs jsx setstate react-class-based-component

【解决方案1】：

基于类的组件的setState 生命周期函数可以接受第二个参数回调函数，该回调函数在状态更新后调用。

setState

setState(updater, [callback])

它通常用于做一些简单的事情，比如记录更新的状态。

this.setState({ value }, () => console.log('new value', this.state.value);

我认为通常应该避免这种情况，如果您需要发出任何副作用，例如验证表单数据，那么应该使用常规的组件生命周期方法。 componentDidUpdate 处理更新的状态或道具。

来自文档

setState()的第二个参数是一个可选的回调函数这将在 setState 完成并且组件完成后执行重新渲染。通常我们建议使用componentDidUpdate() 而是这样的逻辑。

在您使用 this.setState({ usernameValid, errorMsg }, this.validateForm); 的情况下，validateForm 函数引用作为回调传递，并在状态更新后调用。

【讨论】：