我有以下 UserContext.js 檔案，它將當前登錄的用戶存盤到用戶物件中，還有一個 setter 函式。在我的 Profile 組件中，我想用當前登錄的用戶資訊預先填充我的輸入欄位，我應該使用 useContext 掛鉤獲取這些資訊。
如果我通常從主頁導航到個人資料頁面，該應用程式作業正常，但是當我嘗試直接訪問 /profile 或在個人資料頁面內重新加載頁面時，我看到我的背景關系在一瞬間變得未定義（如所見）通過 console.log），在它加載一個值之前。這會導致 useEffect() 鉤子和 initializeFields() 函式失敗，因為屬性為空。
我想要發生的是能夠無縫加載當前登錄的用戶，并在應用程式內的其他組件中全域使用它。將來自父組件的用戶物件作為 props 傳遞是不可行的，因為實際上，我的應用程式有幾個組件很深，并且 prop-drilling 不是一個非常優雅的解決方案。
const UserContext = React.createContext({
user: {},
setUser: (user) => {},
});
在 App.js 組件中：
const App = (props) => {
const [user, setUser] = useState(null);
return (
<div className="app">
<UserContext.Provider value={{ user, setUser }}>
<Switch>
<Route path="/profile" exact component={Profile} />
</Switch>
</UserContext.Provider>
</div>
);
Profile.js 組件：
const DashboardProfileModal = (props) => {
const userContext = useContext(UserContext);
const [name, setName] = useState();
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const [address, setAddress] = useState();
console.log(userContext)
useEffect(() => {
initializeFields();
});
const initializeFields = () => {
setName(userContext.user.name);
setUsername(userContext.user.username);
setPassword(userContext.user.password);
setAddress(userContext.user.address);
};
uj5u.com熱心網友回復：
我相信您面臨的問題是因為您在App組件上宣告了提供者。如果您希望整個應用程式可以全域訪問它，您應該將它放在您的index.js檔案中，包裝App組件。就像是：
ReactDOM.render(
<React.StrictMode>
<UserContext.Provider>
<App />
</UserContext.Provider>
</React.StrictMode>,
document.getElementById("root")
)
uj5u.com熱心網友回復：
您可以執行以下操作，并在嘗試使用之前確保 userContext 可用。
您還應該至少useEffect在頁面加載時通過添加運行一次[]（否則它會在每次渲染時不斷觸發）。我還添加userContext了一個依賴項useEffect，然后我檢查userContext和name。這意味著它將確保userContext沒有null它試圖運行方法之前。
然后我還包括!name檢查，以便我們可以確保一旦您的狀態被第一次設定，它就不會繼續嘗試運行您的方法。
const DashboardProfileModal = (props) => {
const userContext = useContext(UserContext);
const [name, setName] = useState();
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const [address, setAddress] = useState();
console.log(userContext)
useEffect(() => {
if(userContext && !name){
initializeFields();
}
},[userContext]);
const initializeFields = () => {
setName(userContext.user.name);
setUsername(userContext.user.username);
setPassword(userContext.user.password);
setAddress(userContext.user.address);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359959.html
標籤：javascript 反应
上一篇：如何使用var和api制作轉換器