[英]How to change React context programmatically?
I'm trying to use the new React context to hold data about the logged-in user.我正在尝试使用新的 React 上下文来保存有关登录用户的数据。
To do that, I create a context in a file called LoggedUserContext.js:
为此,我在名为
LoggedUserContext.js:
的文件中创建了一个上下文LoggedUserContext.js:
import React from 'react';
export const LoggedUserContext = React.createContext(
);
And sure enough, now I can get access to said context in other components using consumers, as I do here for example:果然,现在我可以使用消费者访问其他组件中的所述上下文,就像我在这里做的那样:
<LoggedUserContext.Consumer>
{user => (
(LoggedUserContext.name) ? LoggedUserContext.name : 'Choose a user or create one';
)}
</LoggedUserContext.Consumer>
But obviously, for this system to be useful I need to modify my context after login, so it can hold the user's data.但很明显,为了让这个系统有用,我需要在登录后修改我的上下文,以便它可以保存用户的数据。 I'm making a call to a REST API using axios, and I need to assign the retrieved data to my context:
我正在使用 axios 调用 REST API,我需要将检索到的数据分配给我的上下文:
axios.get(`${SERVER_URL}/users/${this.state.id}`).then(response => { /*What should I do here?*/});
I see no way to do that in React's documentation, but they even mention that holding info of a logged in user is one of the use cases they had in mind for contexts:我在 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.
Context 旨在共享可被视为 React 组件树的“全局”数据,例如当前经过身份验证的用户、主题或首选语言。 For example, in the code below we manually thread through a “theme” prop in order to style the Button component:
例如,在下面的代码中,我们手动遍历“主题”道具以设置 Button 组件的样式:
So how can I do it?那么我该怎么做呢?
In order to use Context
, you need a Provider
which takes a value, and that value could come from the state of the component and be updated为了使用
Context
,您需要一个Provider
它接受一个值,该值可以来自组件的状态并被更新
for instance例如
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>
}
}
The section about dynamic context explains it关于动态上下文的部分解释了它
Wrap your consuming component in a provider component:将您的消费组件包装在提供程序组件中:
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>
);
}
}
I gave a complete example to make it even clearer (untested).我给出了一个完整的例子,使其更加清晰(未经测试)。 See the docs for an example with better component composition.
有关更好的组件组合的示例,请参阅文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.