使用上下文时 Reactjs useContent Hook return 未定义

Question

我在 App.js 中创建了一个用户上下文，然后我使用 context.provider 为子组件提供了上下文值。我可以简单地使用“login.js”组件的上下文，但是当我尝试从另一个组件使用它时，它会给出“未定义”值。

这是我的 App.js

import React, {createContext} from "react";
export const UserContext = createContext();
function App() {
  const [loggedUser, setLoggedUser] = React.useState({});
  const changeUserValue = (newValue)=>{
    setLoggedUser(newValue);
  }

return (
      <Router>
        <Switch>
        <UserContext.Provider value={{loggedUser,changeUserValue}}>
        <Route path="/" exact>
          {loggedUser.username ? <Home /> : <Login />}
        </Route >
        <Route path="/home" exact>
            {loggedUser.username ?
              <Home />
              :
              <Login />}
        </Route >
        </UserContext.Provider>
         </Switch >
        <Footer />
      </Router >
        );
}

这是我在 Login.jsx

中使用上下文的第一个组件

import React, {useContext} from "react";
import UserContext from "../../App.js"
function Login(props) {
  const {changeUserValue}= useContext(UserContext);
...
Axios(config)
      .then(function(response) {
        if(response.status===200){
          changeUserValue(response.data);
          localStorage.setItem("myUser", JSON.stringify(response.data));
        }
      })
      .catch(function(error) {
        setErrors([{code:"Credintials", text:error.message}])
      });

这是另一个组件“AdminControl.jsx”，它在使用上下文时给出“undefined”值：

import React, {useContext} from "react";
import UserContext from "../../App.js"
function AdminControls(props){
  const {user}=useContext(UserContext);
  console.log(user);
  ...

请记住，最后一个组件是该组件的子组件。

Answer 1

user 不是您作为 value 传递给 provider 的对象的属性。

这一行：const {user}=useContext(UserContext); 正在尝试从上下文中获取 user 属性，即 {loggedUser,changeUserValue}，因此您会得到 undefined

也许你打算写 const {loggedUser: user} = useContext(UserContext);？（属性解构时重命名）

此外，UserContext 的导入被假定为默认导出，但事实并非如此。所以你必须像这样将它导入大括号 import {UserContext} from "../../App.js"

使用上下文时 Reactjs useContent Hook return 未定义

Reactjs useContent Hook return undefined when consuming a context

reactjs

react-hooks

use-context