道歉。在這里反應菜鳥。
遇到一個問題，我的代碼卡在一個永無止境的回圈中。我只將代碼剝離到我認為導致問題的部分。
function Packages(){
const [packages, setPackages] = useState([]);
useEffect(() => {
if(!packages){
getPackages();
}
});
const getPackages = async () => {
const resp1 = await instance.get('https://jsonplaceholder.typicode.com/todos/1');
setPackages(resp1);
};
}
我已經使用該useEffect方法來匹配 componentDidMount。那是對的嗎？
我評論“setPackages(resp1);”的那一刻 永無止境的回圈停止。我可能錯誤地使用了 useEffect 和 useState 鉤子。
感謝任何有關此的指導。
uj5u.com熱心網友回復：
如果你不向useEffect鉤子傳遞第二個引數，它會在你的組件每次重新渲染時執行。
如果您只想在組件安裝后獲取資料一次，則將一個空的依賴陣列傳遞給useEffect鉤子。
useEffect(() => {
if(!packages){
getPackages();
}
}, []);
這樣做將修復useEffect鉤子的無限執行，但現在 React 將拋出關于缺少useEffect鉤子依賴項的警告，那是因為您需要getPackages在useEffect鉤子的依賴項陣列中添加該函式，但這也會導致useEffect鉤子的無限執行.
您有兩個選項可以解決此問題：
擺脫
getPackages函式并將其代碼移動到useEffect鉤子內useEffect(() => { if(!packages){ (async () => { const resp1 = await instance.get(...); setPackages(resp1); })(); } }, []);使用
useCallback鉤子來記憶getPackages函式，以便它可以安全地添加到useEffect鉤子的依賴陣列中。useEffect(() => { if(!packages){ getPackages(); } }, [getPackages]); const getPackages = useCallback(async () => { const resp1 = await instance.get(...); setPackages(resp1); }, []);
您也不需要useEffect鉤子內的以下檢查：
if(!packages) {
...
}
這種檢查不僅沒有必要，還會導致問題：
使用
packages內useEffect將導致一個關于失蹤依賴警告useEffect掛鉤。這可以通過添加鉤子packages的依賴陣列來解決useEffect如果
packages在useEffecthook的依賴陣列中加入，會導致你原來的問題，即useEffecthook無限執行。useEffecthook 不應更新其依賴項陣列中指定的狀態。由于 的初始值
packages是一個陣列，if (!packages)條件永遠不會為真，因為陣列是一個真值，反轉它總是會評估為假。您可能打算撰寫，
if (!packages.length)但如前所述，此檢查是不必要的。
以下是我將如何重寫您的組件：
function Packages() {
const [packages, setPackages] = useState([]);
useEffect(() => {
instance
.get('https://jsonplaceholder.typicode.com/todos/1')
.then((data) => setPackages(data))
.catch(error => { /* handle error */ };
}, []);
}
有關useEffect鉤子的進一步閱讀，請閱讀：使用效果鉤子
uj5u.com熱心網友回復：
您應該為useEffect. 在此處查看檔案。
例如：
useEffect(() => {
if(!packages){
// ... function here
}
}, [packages]);
uj5u.com熱心網友回復：
添加依賴陣列
像這樣：
useEffect(() => {
if(!packages){
getPackages();
}
},[packages]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/365438.html
標籤：javascript 反应 反应钩子