如何以编程方式更改React上下文？

小编典典

如何以编程方式更改React上下文？

reactjs

我正在尝试使用新的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>

但是显然，为了使该系统有用，我需要在登录后修改上下文，以便可以保存用户的数据。我正在使用axios调用REST
API，并且需要将检索到的数据分配给我的上下文：

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

我在React的文档中看不到这样做的方法，但是他们甚至提到持有登录用户的信息是他们考虑到上下文的用例之一：

上下文旨在共享可被视为React组件树的“全局”数据， 例如当前经过身份验证的用户
，主题或首选语言。例如，在下面的代码中，我们手动遍历“主题”道具以设置Button组件的样式：

那我该怎么办呢？

阅读 262

2020-07-22

共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>
   }
}

关于动态上下文的部分对此进行了解释

2020-07-22