0

У меня есть компонент 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>
  }
};

1 ответ 1

0
  1. Не понятно, что такое UserPage, я предположу, что вы имели в виду UserProfile. Если это так, то зачем вам вообще показывать профиль пользователя до того, как у вас есть access_token? Просто не показывайте его до того, как токен будет получен от сервера
//....
{this.state.access_token &&<UserProfile accessToken={this.state.access_token} />}
//....
  1. Зачем вам вообще UserAuth? Не было бы проще вынести его логику в User? Или вообще объединить с UserProfile? Судить, что лучше, сложно из-за того, что не ясна ваша композиция.
  2. Ваш код не следует ни одному паттерну управления состоянием приложения в React, вся логика данных у вас находится в компонентах и нету глобального хранилища. А что, если вы захотите использовать access_token где-то еще? Также если ваш компонент сделает анмаунт с запущенным асинхронным методом, в конце которого выполняется setState, у вас будет ошибка. Я бы советовал забыть о подобном подходе в принципе. Изучите, что такое Redux и как вместе с ним писать асинхронные экшены (redux-saga, redux-thunk), либо используйте MobX - альтернатива Redux. Также может пригодиться Context, но он не такой гибкий, как остальные два, и не всегда применим.

И как примечание: вместо конструктора можно написать просто

class User extends React.Component {
 state = {
   access_token: '',
 }
//....
}
3
  • Спасибо за ответ. Да, я действительно имел в виду UserProfile. access_token я хотел использовать в компоненте User и передавать как props во все вложенные компоненты, где он нужен. Я только начал изучать React и хотел написать что-то без Redux, но как я понял без него только больше проблем
    – code123
    13 ноя 2019 в 20:27
  • Ну, смотря что вы хотели написать без него) Если todo-list, то можно и без него, но в большинстве случаев без него не обойтись, особенно когда есть что-то асинхронное
    – nt4f04und
    13 ноя 2019 в 20:33
  • Спасибо, буду знать
    – code123
    13 ноя 2019 в 20:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.