使用上下文时，Reactjs useContent钩子返回未定义

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

这是我的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 >
        );
}

下面是另一个组件“AdminControl.jsx”，它在使用上下文时给出了“未定义”值：

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

---

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

用户

不是作为

值传递给
提供程序的对象的属性

这一行：
const{user}=useContext（UserContext）
正在尝试从上下文中获取
user
属性，即
{loggedUser，changeUserValue}
，因此您将获得
未定义的

也许你想写
const{loggedUser:user}=useContext（UserContext）？（分解结构时重命名属性）

此外，UserContext的导入被假定为默认导出，但事实并非如此。因此，您必须将其导入到像这样的花括号中，“./../App.js”
导入{UserContext}才能添加到其中，如果上下文本身未定义，那么您将看到运行时错误无法读取属性user of undefinedDid无法解决问题。我将其更改为const{loggedUser}=useContext（UserContext），但仍然得到“TypeError:无法分解'Object（…）（…）'的属性'loggedUser'，因为它未定义。”但感谢您的回答。我想我能够从提供者的直接子级使用上下文，但不能从子级的子级使用上下文。如果您对此有任何回应，它可能会很有用。我想我遗漏了一些东西，因为我是新的反应者。@AhmadAl Najjar我明白为什么，
UserContext
是一个命名的导出，而您将其作为默认导入，这可能是您的
应用程序
组件。将您的导入从“../../App.js”更改为
import{UserContext}
是的，您是对的。它是固定的。非常感谢。
import React, {useContext} from "react";
import UserContext from "../../App.js"
function AdminControls(props){
  const {user}=useContext(UserContext);
  console.log(user);
  ...