Как изменить контекст React программно?

Question

Я пытаюсь использовать новый контекст React для хранения данных о вошедшем в систему пользователе.

Для этого я создаю контекст в файле с именем LoggedUserContext.js:

import React from 'react';


export const LoggedUserContext = React.createContext(
  );

И, конечно же, теперь я могу получить доступ к указанному контексту в других компонентах, используя потребителей, как я делаю здесь, например:

  <LoggedUserContext.Consumer>
       {user => (
       (LoggedUserContext.name) ? LoggedUserContext.name : 'Choose a user or create one';
       )}
   </LoggedUserContext.Consumer>

Но очевидно, что для того, чтобы эта система была полезной, мне нужно изменить свой контекст после входа в систему, чтобы он мог хранить данные пользователя. Я выполняю вызов REST API с помощью axios, и мне нужно присвоить полученные данные моему контексту:

axios.get(`${SERVER_URL}/users/${this.state.id}`).then(response => { /*What should I do here?*/});

Я не вижу способа сделать это в документации React, но они даже упоминают, что хранение информации вошедшего в систему пользователя является одним из вариантов использования, которые они имели в виду для контекстов:

Контекст предназначен для совместного использования данных, которые можно считать "глобальными" для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочитаемый язык. Например, в приведенном ниже коде мы вручную пропустили пропеллер "theme" для стилизации компонента Button:

Так как я могу это сделать?

Answer 1

Для того, чтобы использовать Context, тебе необходимо Provider который принимает значение, и это значение может исходить из состояния компонента и обновляться

например

class App extends React.Component {
   state = {
      isAuth: false;
   }
   componentDidMount() {
      APIcall().then((res) => { this.setState({isAuth: res}) // update isAuth })
   }
   render() {
       <LoggedUserContext.Provider value={this.state.isAuth}>
           <Child />
       </LoggedUserContext.Provider>
   }
}

Раздел о динамическом контексте объясняет это

Answer 2

Оберните ваш потребительский компонент в компонент поставщика:

import React from 'react';

const SERVER_URL = 'http://some_url.com';

const LoggedUserContext = React.createContext();

class App extends React.Component {
    state = {
        user: null,
        id: 123
    }
    componentDidMount() {
        axios.get(`${SERVER_URL}/users/${this.state.id}`).then(response => { 
            const user = response.data.user; // I can only guess here
            this.setState({user});
        });
    }
    render() {
        return (
            <LoggedUserContext.Provider value={this.state.user}>
                <LoggedUserContext.Consumer>
                    {user => (
                        (user.name) ? user.name : 'Choose a user or create one';
                    )}
                </LoggedUserContext.Consumer>
            </LoggedUserContext.Provider>
        );
    }
}

Я привел полный пример, чтобы сделать его еще более понятным (непроверенным). Посмотрите документы для примера с лучшим составом компонентов.