React：无法使用 useContext 挂钩在 app.js 中设置上下文状态

Question

我无法在 app.js 中设置上下文状态，我以某种方式在其中获得空值，但可以在子组件中访问它。

\n

我想在用户访问页面时在 app.js 中设置上下文状态，以便我可以在整个应用程序中使用它，例如根据用户是否登录显示不同的标题

\n

根据请求的沙盒 URL -> https://codesandbox.io/s/quizzical-snyder-2qghj?file=/src/App.js

\n

我正在关注https://upmostly.com/tutorials/how-to-use-the-usecontext-hook-in-react

\n

应用程序.js

\n

// import installed dependencies\nimport React, { useEffect, useContext } from \'react\';\nimport { BrowserRouter as Router, Switch, Route } from \'react-router-dom\';\n\n// import custom contexts\nimport { AuthContext, AuthContextProvider } from \'./contexts/auth/AuthContext\';\n\n// import pages\nimport Homepage from \'./pages/homepage/Homepage\';\n\n// import components\nimport Footer from \'./components/footer/Footer\';\nimport Header from \'./components/header/Header\';\n\nexport default function App() {\n    const [authState, setAuthState] = useContext(AuthContext);\n\n    useEffect(() => {\n        console.log(authState); // prints *{}*\n        console.log(setAuthState); // prints *() => {}*\n        const token = localStorage.getItem(\'token\');\n        const tokenIsExpired = parseInt(localStorage.getItem(\'tokenIsExpired\'));\n\n        if (!tokenIsExpired && token.length) {\n            setAuthState({\n                userIsLoggedin: true,\n                fName: \'test fname\',\n                lName: \'test lname\',\n                userName: \'testname\'\n            });\n        } else {\n            setAuthState({\n                userIsLoggedin: false,\n                fName: \'\',\n                lName: \'\',\n                userName: \'\'\n            });\n        }\n\n        if (tokenIsExpired) {\n            localStorage.setItem(\'token\', \'\');\n        }\n    }, [authState, setAuthState]);\n\n    return (\n        <Router>\n            <AuthContextProvider value={[authState, setAuthState]}>\n                <div className=\'App\'>\n                    <Header />\n                    <Switch>\n                        <Route exact path=\'/\'>\n                            <Homepage />\n                        </Route>\n                    </Switch>\n                    <Footer />\n                </div>\n            </AuthContextProvider>\n        </Router>\n    );\n}\n

\n

AuthContext.js

\n

import React, { useState, createContext } from \'react\';\n\nconst AuthContext = createContext([{}, () => {}]);\n\nconst AuthContextProvider = (props) => {\n    const [authState, setAuthState] = useState({\n        userIsLoggedin: false,\n        fName: \'\',\n        lName: \'\',\n        userName: \'\'\n    });\n    return (\n        <AuthContext.Provider value={[authState, setAuthState]}>\n            {props.children}\n        </AuthContext.Provider>\n    );\n};\n\nexport { AuthContext, AuthContextProvider };\n

\n

使用AuthCOntext.js

\n

import { useContext } from \'react\';\nimport { AuthContext } from \'./AuthContext\';\n\nconst useAuthContext = () => {\n    const [authState, setAuthState] = useContext(AuthContext);\n\n    const login = (loginDetails) => {\n        setAuthState({\n            userIsLoggedin: true,\n            fName: \'test fname\',\n            lName: \'test lname\',\n            userName: \'testname\'\n        });\n    };\n\n    const logout = () => {\n        setAuthState({\n            userIsLoggedin: false,\n            fName: \'\',\n            lName: \'\',\n            userName: \'\'\n        });\n    };\n\n    return { login, logout };\n};\n\nexport default useAuthContext;\n

\n

header.js

\n

// import installed dependencies\nimport React, { useContext, useEffect } from \'react\';\n\n// import components\nimport LoggedOutHeader from \'./logged-out-header/LoggedOutHeader\';\nimport LoggedInHeader from \'./logged-in-header/LoggedInHeader\';\n\n// import custom contexts\nimport { AuthContext } from \'../../contexts/auth/AuthContext\';\n\nconst Header = () => {\n    const [authState, setAuthState] = useContext(AuthContext);\n    console.log(authState);  //prints *{userIsLoggedin: false, fName: "", lName: "", userName: ""}*\n    console.log(setAuthState); //prints *\xc6\x92 dispatchAction(fiber, queue, action) {...*\n    const header = authState.isUserLoggedIn ? (\n        <LoggedInHeader />\n    ) : (\n        <LoggedOutHeader />\n    );\n\n    return header;\n};\n\nexport default Header;\n

\n

Answer 1

您可以使用内部的上下文提供程序index.js。

ReactDOM.render(
    <AuthContextProvider>
        <App />
    </AuthContextProvider>, 
    document.getElementById('root')
)