Question

我正在尝试使用react上下文为我的react应用程序存储全局变量。我正在使用所有类组件，而没有功能组件。我有一个登录表单，用户可以在其中输入他们的电子邮件和密码，我想使用上下文将电子邮件存储为全局变量。这是我的UserContext文件。

import React from "react";
export const UserContext = React.createContext();
export default UserContext;

然后在我的app.js中进行以下设置：

class App extends Component {
  handleLoggedIn = (username) => {
    console.log("getting user: " + username);
    const user = { name: "deffy" };
    this.setState({ currentUser: user });
  };
  state = { currentUser: { name: null } };
  render() {
    return (
      <React.Fragment>
        <Nav />
        <div className="mainContent">
          <Switch>
            <UserContext.Provider
              value={{
                currentUser: this.state.currentUser,
                onLoggedIn: this.handleLoggedIn,
              }}
            >
              <Route path="/test" component={Test} />
              <Route path="/inventory" component={Inventory} />
              <Route path="/" exact component={Login} />
            </UserContext.Provider>

最后，在登录页面中，我尝试使用onLoggedIn函数更新name变量的值，但似乎无法弄清楚如何使其工作。我有一个doSubmit函数，可在其中调用onLoggedIn：

 doSubmit = () => {
    const { userList, data } = this.state;
    for (let x in userList) {
      if (
        data.email === userList[x].email &&
        data.password === userList[x].password
      ) {
        UserContext.onLoggedIn(userList[x].email);
      }
    }
  };

仅当电子邮件和密码输入与数据库对匹配时，才应更改上下文名称变量的值。我在类组件之后也有这段代码。

static contextType = UserContext;

任何帮助将不胜感激！

如何在子组件中调用react上下文更新功能？

0 个答案: