reactjs - setState 每隔一秒调用一次

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并且调用可能会被批处理以提高性能。

我尝试了许多设置状态的变体，但我似乎无法让它随着每次调用而更新；它仅适用于第二次通话。

例子

标签： reactjs

Answer 1

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

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