假設我有一個這樣的陣列：
[
{
country: '',
'city/province': '',
street: ''
},
{
country: '',
'city/province': '',
street: ''
}
]
useEffect()每次陣列內任何專案中“國家/地區”欄位的值發生變化時，我如何讓鉤子運行？
uj5u.com熱心網友回復：
我不認為您可以在依賴項陣列中專門解決它，但是，您可以在里面useEffect進行檢查以獲得相同的總體結果。
基本上，依賴陣列傳遞了完整的資料狀態，這將在每次更改時觸發效果，然后您進一步檢查子屬性是否已更改。
為簡潔起見，我使用 lodash，但您可以運行任何函式來確定資料是否已更改。
代碼筆：https ://codepen.io/chrisk7777/pen/mdMvpvo ? editors = 0010
const { useState, useEffect, useRef } = React;
const { render } = ReactDOM;
const { isEqual, map } = _;
const App = () => {
const [data, setData] = useState([
{
country: "",
"city/province": "",
street: ""
},
{
country: "",
"city/province": "",
street: ""
}
]);
const prevData = useRef(data);
// hacky updates just to demonstrate the change
// change country - should trigger useEffect
const update1 = () => {
setData((s) => [s[0], { ...s[1], country: s[1].country "a" }]);
};
// change street - should not trigger useEffect
const update2 = () => {
setData((s) => [s[0], { ...s[1], street: s[1].street "a" }]);
};
useEffect(() => {
if (!isEqual(map(prevData.current, "country"), map(data, "country"))) {
console.log("country changed");
}
prevData.current = data;
}, [data]);
return (
<div>
<button onClick={update1}>change country - trigger effect</button>
<br />
<button onClick={update2}>change street - do not trigger effect</button>
</div>
);
};
render(<App />, document.getElementById("app"));
uj5u.com熱心網友回復：
只需將國家映射到效果依賴陣列中即可。
const countries = data.map((x) => x.country);
useEffect(() => {
console.log(countries);
}, countries);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359915.html
標籤：javascript 反应 网络 前端
下一篇：特定年/月的時區錯誤