React - useContext 返回未定义

Posted 2023-04-14

【中文标题】React - useContext 返回未定义

【英文标题】：React - useContext returns undefined

【发布时间】：2020-12-08 00:50:21

【问题描述】：

我正在尝试使用 React Context 来管理身份验证，但我在 PrivateRoute.js 中看不到返回上下文的值

App.js

  render() 
  return (
    <>
    <BrowserRouter>
    <Islogin>
      <Header/>
    <Banner/>
     <Switch>
      <PrivateRoute exact path="/index" component=Landing />
     <PrivateRoute path="/upload" component=Upload exact />
     <PublicRoute restricted=false path="/unauth" component=Unauthorized exact  />
    </Switch>
    </Islogin>
    </BrowserRouter>
  
    </>
  );


export default App;

isAuthenticated 的控制台日志返回 undefined

PrivateRoute.js

const PrivateRoute = (component: Component, ...rest) => 
    const isAuthenticated  = useContext(AuthContext)
    console.log(isAuthenticated)
    const [validCredentials, setValidCredentials] = React.useState(false)
    React.useEffect(() => 
        if (typeof isAuthenticated === 'boolean') 
            setValidCredentials(isAuthenticated)
        
    , [isAuthenticated])
    return (
        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route ...rest render=props => (
            validCredentials  ?
                <Component ...props />
            : <Redirect to="/unauth" />
        ) />
    );
;

export default PrivateRoute;

IsLogin.js

api 调用有效，控制台日志显示为 true。

export default function Islogin( children ) 
    var [auth, setAuth] = React.useState(false)
   React.useEffect(() =>
        axios.post('/api/auth').then(response => 
            var res = response.data.result;
            console.log("try")
            console.log(res)
            setAuth(res)
        )
    ,[])
    
        return (
            <AuthContext.Provider value=auth>
                children
            </AuthContext.Provider>
        )

【问题讨论】：

我没有看到 useContext 是在哪里定义的。它是您创建的函数吗？

***.com/questions/60277899/… 可能是相关的

@DJBurb useContext 是 react reactjs.org/docs/hooks-reference.html#usecontext 提供的钩子。

AuthContext 在哪里定义？请分享。

【参考方案1】：

您可能需要在 (PrivateRoute.js) 中使用它的文件的顶部导入它

试试这个：

import useContext from 'react'