我遇到了以下代碼的問題：
function Test1(props) {
const { ids = [] } = props;
const [evenIds, setEvenIds] = useState<string[]>([]);
useEffect(() => {
const newEvenIds = ids.filter(id => id % 2 === 0);
setEvenIds(newEvenIds);
}, [ids])
return (<span>hello</span>)
}
上面的代碼使用了useEffect鉤子監聽 props 的變化。當這個組件用作 時<Test1 ids={[]}/>，一切似乎都很好。但是如果使用 as<Test1 />不傳遞 props 的話，控制臺會反復報錯maximum update depth exceeded，最終導致瀏覽器崩潰。
我猜想ids具有初始值的變數undefined被賦值[]，這會導致useEffect運行。但這如何導致重復錯誤？
uj5u.com熱心網友回復：
當ids作為 prop 傳遞時，區域ids變數唯一改變其參考的時間將是 prop 更改時。
當它不作為道具傳遞時，默認賦值，因為它在函式內部運行，每次函式運行時，每次都會產生一個新的空陣列。因此，如果函陣列件更新一次，它將嘗試永遠繼續更新，因為默認的空陣列參考不斷變化。
解決此問題的一種方法是將空陣列放在組件之外。（只要確保不要變異，就像在 React 中一樣）
const emptyArr = [];
function Test1(props) {
const { ids = emptyArr } = props;
const [evenIds, setEvenIds] = useState<string[]>([]);
useEffect(() => {
const newEvenIds = ids.filter(id => id % 2 === 0);
setEvenIds(newEvenIds);
}, [ids])
return (<span>hello</span>)
}
但是，狀態不應在多個地方重復。useMemo比單獨的國家和useEffectIMO更合適。
const emptyArr = [];
function Test1(props) {
const { ids = emptyArr } = props;
const evenIds = useMemo(() => ids.filter(id => id % 2 === 0), [ids]);
return (<span>hello</span>)
}
uj5u.com熱心網友回復：
這不是因為破壞了道具。但是您正在使用一個像值一樣的陣列。
常量 { ids = [] } = 道具；
如果要將值用作陣列，請嘗試在 useEffect 中以這種方式使用它；
[JSON.stringfy(ids)]
useEffect 驗證變數內部的值并測驗該值是否更改。但是您需要在其中放入一個原始值。如果需要，如果此陣列在所有位置都有原始值，則可以使用 ids[0] 獲取一個值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/408018.html
標籤：