Javascript 如何以编程方式更改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>

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

上下文用于共享可被视为“全局”的数据 React组件的树，如当前已验证用户， 主题，或首选语言。例如，在下面的代码中，我们 手动穿行“主题”道具，以设置按钮样式 组成部分：

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

---

那么我该怎么做呢？

为了使用

上下文

，您需要一个

提供程序

，它接受一个值，该值可以来自组件的状态并被更新

比如说

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

类应用程序扩展了React.Component{
状态={
伊萨斯：错；
}
componentDidMount（）{
APIcall（）.then（（res）=>{this.setState（{isAuth:res}）//更新isAuth}）
}
render（）{
}
}

---

“关于”部分解释了如何将消费组件包装到提供商组件中：

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

从“React”导入React；
const SERVER_URL='1〕http://some_url.com';
const LoggedUserContext=React.createContext（）；
类应用程序扩展了React.Component{
状态={
用户：null，
身份证号码：123
}
componentDidMount（）{
get（`${SERVER\u URL}/users/${this.state.id}`）。然后（response=>{
const user=response.data.user；//我只能在这里猜测
this.setState（{user}）；
});
}
render（）{
返回(
{user=>(
（user.name）？user.name:“选择一个用户或创建一个用户”；
)}
);
}
}

---

我给出了一个完整的示例，使其更加清晰（未经测试）。请参阅具有更好组件组成的示例。

因此，如果我将用户登录到应用程序中2-3级的组件中，并且我需要在整个应用程序中使用该上下文，那么我仍然需要以某种方式将用户数据一直提升到应用程序状态，以便我可以设置它？是的，上下文只能在提供组件内部访问，不能在外部访问。因此，如果你需要所有应用程序中的数据，你应该考虑包装你的应用程序组件或类似的组件。如果我将整个应用程序包装在提供商中，然后必须从子组件更新它的值，会怎么样？比方说，在用户填写并提交表单之后？在这种情况下，您需要将事件处理程序传递给该组件。但听起来您的场景并不是真正的上下文——用户输入通常是本地状态。否则，考虑一个像ReDux这样的库。同样的问题是另一个答案：所以如果我把用户登录到应用程序中的2-3个级别的组件中，并且我需要在整个应用程序中消耗我的上下文，然后我仍然需要以某种方式将用户数据一直提升到应用程序状态，以便我可以设置它？是的，如果您需要在整个应用程序中使用上下文，那么您需要一个顶级提供商并提升状态在这里可能是一个半愚蠢的问题，但是如果恶意用户只是通过开发工具或其他方式操纵状态，该怎么办？（很明显，API会受到保护，但我很好奇，它不会受到保护）。