我正在發送這樣的請求：
function getDecks() {
return Axious.get(urlGetAllDecks).then((response) => response.data);
}
然后我使用一個功能組件，我嘗試通過從我的 database.js 檔案呼叫上述函式來初始化狀態。但是， useEffect 塊被呼叫了無數次。
export interface DeckSelectionState {
id: number;
module: number;
title: string;
description: string;
dateCreated: string;
reviewStatus: number;
nextReviewDate: string;
}
const DeckSelection: React.FunctionComponent = () => {
const [decks, setDecks] = React.useState<DeckSelectionState[]>([]);
React.useEffect(() => {
database.getDecks().then((response) => {
setDecks(response);
});
});
關于如何解決這個問題的任何想法？
uj5u.com熱心網友回復：
為了確保useEffect只執行一次，您必須通過傳遞一個空陣列來指定一個空的依賴項串列。
代碼應如下所示：
React.useEffect(() => {
database.getDecks().then((response) => {
setDecks(response);
});
}, []);
的第二個引數useEffect是依賴關系陣列，它指定效果依賴的值串列，這意味著只有當這些值之一發生變化時才會執行效果。通過指定陣列，[]您基本上是說效果不依賴于任何值，并且應該只執行一次，而不指定依賴陣列意味著效果依賴于所有道具和狀態。
從檔案：
如果您只想運行效果并僅將其清理一次（在裝載和卸載時），您可以傳遞一個空陣列 ([]) 作為第二個引數。這告訴 React 你的 effect 不依賴于來自 props 或 state 的任何值，所以它永遠不需要重新運行。這不是作為特殊情況處理的——它直接遵循依賴項陣列的作業方式。如果傳遞一個空陣列 ([])，則效果中的 props 和 state 將始終具有其初始值。雖然傳遞 [] 作為第二個引數更接近熟悉的 componentDidMount 和 componentWillUnmount 心智模型，但通常有更好的解決方案來避免過于頻繁地重新運行效果。另外，不要忘記 React 將 useEffect 的運行推遲到瀏覽器繪制完成之后，所以做額外的作業不是問題。
為什么不指定[setDecks]為依賴陣列？
setDecks是設定你使用過的 useState 鉤子對應的狀態的函式。雖然您可以將它添加到依賴陣列，因為效果似乎“依賴”于它，但它永遠不會改變，因此永遠不會影響效果。從檔案中useState：
React 保證 setState 函式標識是穩定的，并且不會在重新渲染時發生變化。這就是為什么從 useEffect 或 useCallback 依賴項串列中省略是安全的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/322878.html