Reactjs 在登录函数中获取API时，如何进行加载？

当我试图获取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)
    })
}

这是我用来加载我的登录函数的方式是错误的吗？当加载的值为false时，为什么我不能显示线性进度

更新

---

从登录功能中删除else if case。这个

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

else if（this.state.loaded==false）{
返回(
//装载
);
}

在登录输入字段下方的render中添加一个三元条件，用于检查状态，如果状态为false，则渲染

，当登录使状态为true时，将移动到下一页

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

{（this.state.loaded）？null:}

根据您的沙箱，您需要添加/更改一些内容

• 将

  load

  重命名为

  isLoading

  参数为您的

  状态

  ，以便更容易理解其可用性

this.state={
罗吉内梅尔酒店，
登录密码：“”，
错误：{}，
重定向：false，
孤岛加载：false，
历史记录：PropTypes.object.isRequired
};

• 触发状态更改为

  true

  当您启动调用时，有几种方法可以执行此操作，但最简单的方法是直接在

  login

  函数中更改

  isLoading

• 在调用之后添加一个

  finally

  承诺处理程序，以便在成功或失败的情况下将加载状态更改为false

login（）{
const{history}=this.props；
this.setState（{isLoading:true}）；
PostData（“api/users/login”，this.state）
。然后（结果=>{
让responseJSON=结果；
if（responseJSON.success==true）{
localStorage.setItem（“loginEmail”，this.state.loginEmail）；
setItem（“id”，responseJSON.user.id）；
history.push（“/Home”）；//成功登录后，将转到主页
}else if（responseJSON.success==false）{
警报（“错误的用户凭证”）；
}
})
.catch（错误=>{
console.log（错误）；
})
.finally（（）=>this.setState（{isLoading:false}））；
}

• 最后一件事是在页面中添加
  元素并为其设置条件。在您的情况下，

  isLoading

  为

  true

  。通过添加以下行，可以将元素放置在渲染中的任何位置

{this.state.isLoading&&}

在这种情况下，您需要在触发API调用并将其设置为true时，在加载状态下设置一个变量。当响应返回时，将其设置为false。根据加载参数在视图中显示

。如果你分享整个代码，也许我可以help@Sabbin嗨，谢谢你的回复。这里是codesandbox链接

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