我遇到了一些問題，似乎找不到解決問題的辦法。事情是這樣的，當我手動輸入時，比如說你的目標是localhost:3000/dashboard，它應該觸發app.js，這是我的根組件和儀表板組件。這里的問題是，儀表盤組件需要從商店獲得用戶，而它只能在app.js的useEffect鉤中獲得。為了簡化這個方法，問題是儀表盤的useEffect在app.js的useEffect之前觸發，但我想讓它反過來，否則儀表盤的useEffect將從商店回傳未定義的用戶，但用戶應該是null或真實的用戶名。
以下是我的簡化代碼，以便更好地理解：
App.js -> 在我的商店中設定用戶，并有路線
function App（） {
const [{ user }, dispatch] = useStateValue（）。
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) =>/span>{
if (authUser) {
dispatch（{
type: 'SET_USER'。
user: authUser
});
} else {
dispatch({
type: 'SET_USER'。
user: null。
});
}
});
return () => {
unsubscribe（）。
}
}, []);
console.log('User is >>> ', user)。
return (
<Router>
<div className="app"/span>>
<Switch>/span>
<Route path="/dashboard"/span>>
<Dashboard />
</Route>/span>
<Route path="/"/span> >
<Header />
<Home />>
</Route>/span>
</Switch>/span>
</Div>/span>
</Router>
);
##############################
Dashboard.js ->應該從商店獲得用戶，這樣它就可以獲取其他資料，但錯誤發生了，因為用戶是未定義的，因為Dashboard useEffect發生在app.js useEffect之前
。const Dashboard = (/span>) => {
const [{user}] = useStateValue（）。
useEffect(() => {
console.log(`user is ${user}`) 。
getItemsByUser（user）。
}, [])
const getItemsByUser = async（user）=> {
const items = await firebaseService.getUserProducts（user）。
console.log(items[0] )
}
}
這里的主要問題是，當我手動重繪 頁面時，Dashboard useEffect會在App.js useEffect之前觸發。如果我想在我的標題/導航中導航到/dashboard，任何事情都應該是好的，但我想涵蓋手動的方法。我怎樣才能解決這個問題呢？也許任何型別的中間件都會有幫助，但我根本找不到任何有用的東西。
。uj5u.com熱心網友回復：
將你的效果編程為反應性的。
useEffect(() => {
//這個效果現在可以處理用戶的所有可能的值。
//它還將在用戶狀態發生變化時更新儀表盤。
//這就是一般的方法，因為反應狀態/背景關系狀態。
//價值更新是異步的，因此消費者必須
//>處理未定義的狀態。
if (user) getItemsByUser（user）。
}, [user])。
Btw，由于React的異步性，以嚴格的順序來考慮解決方案通常是沒有幫助的（比如試圖讓一件事在另一件事之前發生）。相反，組件和鉤子中的邏輯應該只用于消耗可用的道具/狀態并生成正確的UI。也就是說，它們應該是反應式的。效果只是一種簡單的方式，用于宣告當組件的某些依賴關系被更新時，哪些功能應該運行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/322739.html
標籤：