在完成提取之前渲染React.js

Question

好的，我的问题是我的应用程序在提取完成之前进入了渲染状态，因此渲染错误

这是代码

componentWillMount() {     
  fetch('http://localhost:8081/milltime/login?users='+this.state.email, {

})
    fetch("http://localhost:8081/milltime/getUsers")
      .then(res => res.json())
      .then(info => {
        this.setInfo(info);
          for (var i = 0; i < info['mta:getUsersResponse']['mta:users'].length; i++) {
            const user = {
              id: info['mta:getUsersResponse']['mta:users'][i]['mta:UserId'],
              username: info['mta:getUsersResponse']['mta:users'][i]['mta:UserLogin'],
              name: info['mta:getUsersResponse']['mta:users'][i]['mta:FullName']
          }

          this.addUser(user); 
        }
  }).then(function() {
            console.log("signed in to milltimes");
        }).catch(function() {
            console.log("need to sign in to milltime");
        });

}

setInfo(info) {
    this.setState({
      info: info,
  })
}
     render() {
    if (!this.state.info) {
      return (
              <MilltimeLogin email={this.state.email}/>
     );  
    } 

  return(

 <div className="usersTable">
   <Table striped bordered condensed responsive hover>
     <thead>
     <tr>
     <th/>
      <th className="title">Employees</th>
      <th/>
      </tr>
       <tr>
        <th>Id</th>
        <th>Full Name</th>
        <th>Username</th>
       </tr>
     </thead>
       <tbody>
          {
            Object
              .keys(this.state.Users)
              .map(key => <User key={key} index={key} details={this.state.Users[key]} onChange={this.props.onChange} />)
          }
       </tbody>
   </Table>
 </div>

  );
}
}

这里的问题是，第二次获取/ getUsers需要第一个获取提供的会话密钥才能正常工作，否则它将给出一个错误，即丢失了会话。 并且由于某种原因它没有获得此会话密钥，因此它没有设置信息，因此render函数将进入if语句并渲染MilltimeLogin组件，而不是其余部分。 任何人都知道如何确保第一次获取均已完成，以便第二次获取会话密钥。

如果我一次重新加载页面，则进行编辑，但这不是我想要的方式

Answer 1

提取是异步的，您可以在此处阅读，因此没有什么可以确保您的第二次提取开始时第一次提取将结束。
也许await前缀可以在这里为您提供帮助（有关详细信息，请阅读此内容）希望这对您的研究有所帮助