我有一個定義如下的狀態變數
const [val, setVal] = useState({ notdone: [], done: [] })
其中done具有以下結構
[ { col: "val1", field: "val1", values: [1,2,3]}, { col: "val2", filed: "val2", values:[] }
當對每個物件下的doneand陣列進行一些更改時，我想運行 useffect 。values就我而言，當我將物件洗掉/添加到done. 但不是當values每個物件的陣列內部發生一些變化時。
我怎樣才能看到這兩種變化
useEffect(() => {
callback();
}, [val.done.length]);
使用 是可以實作的use-deep-compare-effect，但是有沒有辦法在不使用這個外部包的情況下做到這一點？
幫助將不勝感激
uj5u.com熱心網友回復：
單獨使用外部陣列長度是不夠強的比較。最好的反例是陣列突變，其中一個元素被洗掉而另一個元素被添加，結果是一個相同長度的陣列。
React 的Object.is相等性檢查也不會進行您所尋求的深度相等性檢查。
我知道在沒有外部依賴的情況下做到這一點的唯一方法是有點 hack，但它的作業原理是 JSON stringify* 陣列，因此使用了完整的字串比較。
useEffect(() => {
callback();
}, [JSON.stringify(val.done)]);
* 來源基本上是Dan Abramov的推特對話
深度相等檢查通常是個壞主意。如果輸入足夠淺以至于您認為深度相等仍然很快，請考慮僅使用 [JSON.stringify(obj)] 代替。請注意，它不會比較功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/427820.html
標籤：javascript 反应 反应钩子 使用效果 使用参考
上一篇：如何使用react將response.text()轉換為JSON
下一篇：如何在避免閃爍的同時翻譯元素？