React.js 在 fetch 完成之前渲染答案

【问题标题】：React.js render before fetch is doneReact.js 在 fetch 完成之前渲染
【发布时间】：2018-04-21 07:47:06
【问题描述】：

好的，我有一个问题，我的应用在我的提取完成之前进入渲染，所以它渲染错误

这里是代码

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 需要第一次获取提供的会话密钥才能工作，否则它将给出一个错误，即其缺少会话。并且由于某种原因它没有得到这个会话密钥，它没有设置信息，所以渲染函数将进入 if 语句并渲染 MilltimeLogin 组件而不是其余部分。任何人都知道如何确保第一次获取全部完成，以便第二次获取会话密钥。

编辑如果我重新加载页面一次它可以工作但那不是我想要的

【问题讨论】：

我对你想要的东西有点困惑，但也许知道 setState takes a callback 会在状态更新后触发。

标签： javascript reactjs session fetch

【解决方案1】：

Fetch 是异步的，因为您可以阅读here，所以没有什么可以保证当您的第二个提取开始时第一次提取将结束。
也许await 前缀可以帮助你（阅读this 了解更多信息）希望这对您的研究有所帮助

【讨论】：