在呈現(xiàn)組件之前獲取并驗(yàn)證數(shù)據(jù)

　　問(wèn)題：

　　為了說(shuō)明這個(gè)問(wèn)題，讓我們以用戶的配置文件為例。

　　我會(huì)用一個(gè)參數(shù)定義動(dòng)態(tài)路由，并呈現(xiàn)配置文件組件，在組件內(nèi)部，我將從中獲取，并在內(nèi)部發(fā)出獲取請(qǐng)求以獲取用戶信息。users/:userId userId useParams useEffect

　　問(wèn)題是，真的可以是任何東西。它可能是或...由于 React 在客戶端執(zhí)行所有操作，因此即使有人將 URL 更改為無(wú)效內(nèi)容，頁(yè)面組件也會(huì)呈現(xiàn)，例如，如果有人嘗試訪問(wèn)已刪除的用戶配置文件的 URL。userId 12 hellomom users/hilol

　　當(dāng)然，擁有良好的結(jié)構(gòu)非常重要，在獲取數(shù)據(jù)時(shí)在頁(yè)面組件中顯示加載指示器，如果獲取失敗，則顯示錯(cuò)誤消息至關(guān)重要。但是，如果我們可以在渲染組件之前獲取并驗(yàn)證數(shù)據(jù)呢？

　　我的解決方案

　　我構(gòu)建了一個(gè)管理器組件，負(fù)責(zé)驗(yàn)證 fetch 響應(yīng)是否正常，如果可以，則呈現(xiàn)頁(yè)面組件，否則顯示 404 頁(yè)面。

　　讓我引導(dǎo)您完成代碼。

　　首先，我將頁(yè)面組件包裝在管理器組件中，如下所示：

　　然后，我會(huì)向管理器傳遞一個(gè)名為 prop 的 prop，這是一個(gè)接收路由參數(shù)并返回 fetch 請(qǐng)求的函數(shù)。fetcher

　　當(dāng)用戶進(jìn)入頁(yè)面時(shí)，將發(fā)生的第一件事是管理器將執(zhí)行第一個(gè)useEffect，即執(zhí)行驗(yàn)證的那個(gè)。僅當(dāng)路徑名不在 中時(shí)。invalidRoutesRef

　　注意：每次掛載都會(huì)是空的，我建議你使用 Redux 或 React 上下文來(lái)存儲(chǔ)，以避免驗(yàn)證路由徒勞無(wú)功。invalidRoutes

　　我使用而不是簡(jiǎn)單地使用像 一樣的標(biāo)志的原因是，我注意到在導(dǎo)航到不同的配置文件后，其值將保留為“false”，因此即使 有效，頁(yè)面也會(huì)顯示404。invalidRoutesRef isValid isValid userId

　　該函數(shù)首先將 設(shè)置為 true(Hint：默認(rèn)將其設(shè)置為 true，以便在第一次渲染