Как программно изменить контекст React?
Я пытаюсь использовать новый контекст 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, но они даже упоминают, что хранение информации о вошедшем в систему пользователю является одним из вариантов использования, которые они имели в виду для контекстов:
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:
Так как я могу это сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Чтобы использовать 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>
}
}
Раздел о динамический контекст объясняет это
Да, если вам нужен контекст, который будет использоваться внутри всего вашего приложения, тогда вам нужен провайдер на верхнем уровне и поднять состояние
Это может быть полуглупый вопрос, но что, если злоумышленник просто манипулирует состоянием из инструментов разработчика или чего-то еще? (API, очевидно, будет защищен, но, тем не менее, мне любопытно).
Оберните свой потребляющий компонент в компонент поставщика:
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>
);
}
}
Я привел полный пример, чтобы было понятнее (непроверено). См. документы для примера с лучшим составом компонентов.
Поэтому, если я регистрирую пользователя в компоненте, который находится на 2-3 уровня в приложении, и мне нужно, чтобы этот контекст использовался во всем приложении, мне все равно нужно каким-то образом поднять пользовательские данные до состояния приложения. так что я могу его установить?
Да, контекст будет доступен только внутри предоставляющего компонента, а не снаружи. Поэтому, если вам нужны эти данные во всем приложении, вам следует подумать об упаковке компонента вашего приложения или о чем-то подобном.
Что, если я заключу все приложение в провайдер, а затем мне придется обновить его значение из подкомпонента? Скажем, после того, как пользователь заполнит и отправит форму?
в этом случае вам нужно будет передать обработчики событий этому компоненту. но похоже, что ваш сценарий на самом деле не тот, для которого создан контекст - пользовательский ввод обычно является локальным состоянием. в противном случае - подумайте о такой библиотеке, как redux.
Тот же вопрос, что и другой ответ: поэтому, если я регистрирую пользователя в компоненте, который находится на 2-3 уровня в приложении, и мне нужно, чтобы мой контекст использовался во всем приложении, мне все равно нужно как-то поднять пользовательские данные вплоть до состояния приложения, чтобы я мог его установить?