У меня есть компонент User
, который рендерит компоненты UserAuth
и UserProfile
. Компонент User
хранит access_token
, который получает из UserAuth
. Компонент UserProfile
делает запрос к серверу (c access_token
`ом, который он взял из User
), и отображает информацию про пользователя.
Проблема в том что дочерний компонент маунтится раньше родителя, поэтому при запросе к серверу в componentDidMount()
компонент UserProfile
еще не имеет access_token
.
Как мне вызвать функцию запроса к серверу, когда User
обновит свой стейт?
// User
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
access_token: '',
};
}
onUserChange = (new_user) => {
this.setState(new_user);
};
render() {
return <div className="User">
<UserProfile accessToken={this.state.access_token} />
<UserAuth userChange={this.onUserChange} />
</div>
}
}
// UserProfile
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.state = {
userProfile: 'No access token',
}
}
// Где вызвать?
updateUserProfile = async (request_params) => {
//...Запрос к серверу...
this.setState({userProfile: response});
};
render() {
return <div className="UserProfile">
{this.state.userProfile}
</div>
}
};