Блог

Мой загрузчик не работает, когда я нажимаю на кнопку входа в систему, я хочу, чтобы загрузчик был виден. это мой код, и когда я нажимаю на кнопку, состояние по-прежнему ложное, оно не обновляет состояние. пожалуйста, ознакомьтесь с кодом и порекомендуйте мне, как это реализовать.

**Конструктор компонентов класса React **

 constructor(props)
  {
    super(props);
    this.state = {
      loaderVisible: false
    }
  }
 

Функция Входа в систему

  login = () =>
  {
    this.setState({ loaderVisible: true });
    
    let userID = this.state.email;
    let pass = this.state.pass;
    if (userID.length > 0)
    {
      this.setState({ inputIDError: '' });
      this.setState({ inputIDTextError: '' });
      if (pass.length > 0)
      {
        this.setState({ inputPassError: '' });
        this.setState({ inputPassTextError: '' });

        let data = { userID: userID, pass: pass};
        axios.post(URLs.loginURL, data)
          .then(res =>
          {
            if (res.data === "Account Expired")
            {
              this.setState({ errorMsg: 'اکونت شما موقتآ مسدود گردیده' });
            }
            else if (res.data === "wrongCredentials")
            {
              this.setState({ errorMsg: 'Wronge Email or Password, Please try again' });
            }
            else
            {
              // var ndata = res.data[0];
              // this.setState({Role:ndata[0].Role});
              // ndata.map((d) => localStorage.setItem("userInfo", JSON.stringify(d)))
              // if (this.state.Role === "teacher")
              // {
              //   this.props.history.push("/teacher/index");
              // }
              // else if (this.state.Role === "admin")
              // {
              //   this.props.history.push("/admin/index");
              // }
              // else
              // {
              //   this.props.history.push("/student/index");
              // }
            }
          });
      }
      else
      {
        this.setState({ inputPassError: 'bg-gradient-danger text-white' });
        this.setState({ inputPassTextError: 'bg-danger text-white' });
      }
    }
    else
    {
      this.setState({ inputIDError: 'bg-gradient-danger text-white'});
      this.setState({ inputIDTextError: 'bg-danger text-white'});
    }
    setTimeout(this.setState({ loaderVisible: false }),30000);
}
 

То , что вы видите здесь, — это то, что обновление состояния loaderVisible до true будет загружено вместе с обновлением до false , и оно будет принимать только последнее значение. Таким образом, кажется, что он не обновляется, но на самом деле он обновляется — просто не до того значения, которое вы хотите.

setTimeout(this.setState({ loaderVisible: false }),30000); это не то, что ты думаешь.

Вы вызываете setState функцию немедленно, не дожидаясь тайм-аута. Вам нужно передать setTimeout функцию:

 setTimeout(() => this.setState({ loaderVisible: false }),30000);
 

Главный вывод для вашей ситуации-это:

 this.setState(); // <-- Function call
() => this.setState(); // <-- Function reference (new anonymous function)