가져 오기가 완료되기 전에 React.js 렌더링

좋아요, 가져 오기가 완료되기 전에 앱이 렌더링에 들어가서 잘못 렌더링되는 문제가 있습니다.

여기에 코드가 있습니다

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 구성 요소를 렌더링합니다. 누구나 첫 번째 가져 오기가 모두 완료되었는지 확인하는 방법을 알고 있으므로 두 번째 가져 오기가 세션 키를 얻습니다.

페이지를 한 번 다시로드하면 편집이 작동하지만 원하는 방식이 아닙니다.