我正在嘗試構建一個簡單的身份驗證系統，將登錄用戶的用戶名保存在本地存盤中。但我也想把它保存在一個狀態中，因為頁面會根據用戶是否登錄而呈現不同的狀態。
我想做的是在我的 app.js 中有一個 loggedUser 狀態。我還創建了一個背景關系，以便我可以從子組件更改該狀態，例如RegistrationForm
當我嘗試呼叫 UserContext 時，我發現它是未定義的。我需要匯出它才能使用嗎？如果是，那么背景關系提供者和消費者的目的是什么。
這是我的 app.js 代碼
function App() {
//logged in user
const [loggedUser, setLoggedUser] = useState(null);
//create context for user
const UserContext = createContext({
loggedUser: null,
setLoggedUser: () => {},
});
//value that will be passed to the context
const value = {
loggedUser,
setLoggedUser,
};
//get the logged User if already exists
useEffect(() => {
setLoggedUser(localStorage.getItem("user"));
}, []);
.
.
.
return (
<UserContext.Provider value={value}>
.
.
.
</UserContext.Provider>
);
}
這是我呼叫的地方useContext，我收到未定義 UserContext 的錯誤
export default function RegistrationForm({ onClick }) {
const navigate = useNavigate();
const { setLoggedUser } = useContext(UserContext);
.
.
.
uj5u.com熱心網友回復：
請定義UserContext外部app.js并將其匯出。UserContext然后在要使用它的檔案中匯入。
export const UserContext = createContext({
loggedUser: null,
setLoggedUser: () => {},
});
function App() {
const [loggedUser, setLoggedUser] = useState(null);
... ... ...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/533631.html
上一篇：如何從陣列中獲取值串列的型別？
下一篇：滾動到元素下方時檢測