Как сделать загрузку, когда я получаю API в функции входа в систему?

Question

Я застрял в определенном проекте для показа загрузки , когда я пытаюсь получить API для входа в систему. Я использую

Рассмотрим код ниже:

login(){
  const { history } = this.props;
    PostData('api/users/login', this.state)
    .then ((result) => {
      let responseJSON = result;
      this.setState({
        loaded: true
      })
      if(this.state.loaded === true){
      if(responseJSON.success === true){
        localStorage.setItem('loginEmail', this.state.loginEmail);
        localStorage.setItem('id', responseJSON.user.id);

        history.push('/Home')    // when successfully login, it will go to Home Page

      }else if(responseJSON.success === false){
        alert("Wrong User Credential")
      }}else if(this.state.loaded === false){
        return(
         <LinearProgress />    // for loading
        )
      }
    }).catch((error) => {
      console.log(error)
    })
}

и вот мой конструктор для этого. Состояние

constructor (props){
  super(props);
  this.state ={
    loginEmail: '',
    loginPassword: '',
    error: {},
    loaded: false,
    history: PropTypes.object.isRequired
  }
  this.login = this.login.bind(this);
  this.onChange = this.onChange.bind(this);
}

это то, как я использую для загрузки в моем функция входа не так? Почему я не могу показать линейный прогресс , когда загружено ложно?

Обновление Вот мой код от коды и коробки

Answer 1

Исходя из вашей песочницы, есть несколько вещей, которые вам нужно добавить / изменить

• Переименовать loaded в isLoading параметр в state, чтобы его было легче понять это удобство использования

this.state = {
    loginEmail: "",
    loginPassword: "",
    error: {},
    redirect: false,
    isLoading: false,
    history: PropTypes.object.isRequired
};

• Запустить изменение состояния на true при вызове, есть несколько способов сделать это, но самый простой - изменить isLoading непосредственно в функции login
• Добавьте обработчик обещания finally, чтобы после вызова изменить состояние загрузки на false в любом случае, успешном или неудачном.

login() {
  const { history } = this.props;
  this.setState({isLoading:true});
  PostData("api/users/login", this.state)
    .then(result => {
      let responseJSON = result;
        if (responseJSON.success === true) {
          localStorage.setItem("loginEmail", this.state.loginEmail);
          localStorage.setItem("id", responseJSON.user.id);

          history.push("/Home"); // when successfully login, it will go to Home Page
        } else if (responseJSON.success === false) {
          alert("Wrong User Credential");
        }
    })
    .catch(error => {
      console.log(error);
    })
    .finally(() => this.setState({ isLoading : false }));
}

• Последнее, что нужно добавить - элемент <LinearProgress /> на странице и установить для него условия. В вашем случае isLoading будет true. Вы можете разместить элемент в любом месте рендера, добавив следующую строку

{this.state.isLoading && <LinearProgress />}

Answer 2

Удалить else, если case из функции входа в систему. Это.

else if (this.state.loaded === false) {
      return (
        <LinearProgress /> // for loading
      );
    }

и In render под вашим полем ввода логина, добавьте троичное условие, которое проверяет состояние, и если состояние ложно, отображает <LinearProgress /> и когда состояние становится истинным при входе в систему, что переместится на следующую страницу. .

        <input
          type="submit"
          value="Login"
          className="logbtn"
          onClick={this.login}
        />
{(this.state.loaded)?null: <LinearProgress />}