19

我正在尝试使用新的 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 的文档中看不到这样做的方法，但他们甚至提到保存登录用户的信息是他们考虑的上下文用例之一：

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

那么我该怎么做呢？

4

2 回答 2

18

为了使用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>
   }
}

关于动态上下文的部分解释了它

于 2018-04-03T12:32:14.433 回答
5

将您的消费组件包装在提供程序组件中：

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>
        );
    }
}

我举了一个完整的例子，让它更清楚（未经测试）。请参阅文档以获取具有更好组件组合的示例。

于 2018-04-03T12:35:14.953 回答