反应 - useContext returns 未定义

Question

我正在尝试使用 React Context 来管理身份验证，但我看不到 return 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 return未定义的控制台日志

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

Answer 1

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

试试这个：

import {useContext} from 'react'

反应 - useContext returns 未定义

React - useContext returns undefined

javascript

reactjs

react-context

App.js

PrivateRoute.js

IsLogin.js