Как создать структуру загрузки, когда я пытаюсь получить API? (React. js)

Question

Я пытаюсь выполнить загрузку в своей функции входа в систему, когда я вызываю имя входа API , будет отображаться слово loading (позже создаст css дизайн) Во-первых, когда API-интерфейс успешно вызывается, он go переходит на другую страницу.

Рассмотрим приведенный ниже код:

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

             history.push('/Home')
          ) : (
            return(
              <>
                <div>Loading</div>      //I get the error here
              </>
            )
          )
        }
    }).catch((error) => {
      console.log(error)
    })
}

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

Поэтому я считаю, что способ, которым я пользуюсь, проводил любая ошибка Любой другой более подходящий и простой способ сделать структуру loading для извлечения API?

Обновление : вот ошибка:

Parsing error: Unexpected token

Answer 1

Создайте логическую переменную, например.

this.state.loading = false;
login(){
 this.setState({
  loading:true;
 })
 api.login().then(response=>{
  this.setState({
   loading:false;
  })      
 })
}
render(){
     return (
     this.state.loading?('<div>Loading...</div>'):('your html page')
   )
}

Здесь вы можете прочитать о Условном рендеринге Ссылка