Question

我有一个简单的表格来设置passwordInvalid的状态。

状态最初是：

this.state = { email: '', passwordInvalid: false };

并且email部分很好，当我提交表单时它会更新。

更改passwordInvalid的函数是：

passwordValidator = (email) => {
    this.setState(() => {
      if (email === 'test') {
        this.setState({ passwordInvalid: true });
      }
      else {
        this.setState({ passwordInvalid: false });
      }
    })
  }

并且这样称呼：

  mySubmitHandler = (event) => {
    this.passwordValidator(this.state.email);
    if (this.state.passwordInvalid) {
      event.preventDefault();
      alert("Email: '" + this.state.email + "' is invalid.");
    }
    else {
      event.preventDefault();
      alert("Email address submitted: " + this.state.email);
    }
  }

我已经阅读了一些文档：

setState()不会立即突变this.state，而是会创建一个等待状态转换。调用后访问this.state 方法可能会返回现有值。没有保证对setState的调用同步运行，并且调用可以进行批量处理以提高性能。

我已经尝试了多种设置状态的方法，但是我似乎无法每次调用时都进行更新。它仅适用于第二个通话。

Example

Answer 1

您不应在setState中使用setState，我认为您应该这样做：

passwordValidator = email => {
  if (email === "test") {
    this.setState({ passwordInvalid: true });
  } else {
    this.setState({ passwordInvalid: false });
  }
};

Answer 2

正如您所指出的：

setState（）不会立即使this.state发生突变，但会创建待处理的状态转换。

这意味着，您的设置状态调用将异步执行。

因此，在这一行中，无论您做什么，都将始终获得旧状态passwordInvalid的值

this.passwordValidator(this.state.email);
if (this.state.passwordInvalid) {

或者，您可以使passwordValidator返回一个布尔值，然后在使用它之后将其设置为状态。例如：

mySubmitHandler = (event) => {
  event.preventDefault();
  const isPasswordValid = this.passwordValidator(); // will get state value automatically then calculate if its valid
  this.setState({ passwordInvalid: isPasswordValid });
  if (isPasswordValid ) {
    alert("Email: '" + this.state.email + "' is invalid.");
  }
  else {
    alert("Email address submitted: " + this.state.email);
  }
}

setState每隔一秒调用一次

2 个答案: