我有一個簡單的組件，可以在某些狀態更改時發出異步請求：
const MyComp = () => {
const [state, setState] = useState();
const [result, setResult] = useState();
useEffect(() => {
fetchResult(state).then(setResult);
}, [state]);
return (
<div>{result}</div>
);
};
問題是，有時state在很短的時間內更改兩次，并且fetchResult函式根據state值可能需要非常不同的時間來解決，所以有時會發生這種情況：
正如你所猜想的那樣，state現在state2，而不是state1了，我想result是result2，忽略了接收到的回應then的-obsolete-第一影響通話。
有沒有干凈的方法來做到這一點？
uj5u.com熱心網友回復：
我沒有測驗過這個……但我最初的想法是，如果你在回應中有狀態，你可以檢查獲取的狀態是否與當前狀態匹配。如果不是，那么狀態自請求以來已經改變，你不再關心回應，所以不要設定它。
useEffect(() => {
fetchResult(state).then((response) => {
response.state === state ? setResult(response.data) : false;
});
}, [state]);
您也可以通過在每個請求上保留 fetchedState 的記錄來做到這一點……如果它不再匹配，則再次丟棄它。
useEffect(() => {
let fetchedState = state;
fetchResult(fetchedState).then((response) => {
fetchedState === state ? setResult(response) : false;
});
}, [state]);
uj5u.com熱心網友回復：
我建議您在 useEffect 清理函式中設定某種請求取消方法。
例如使用 axios，它看起來像這樣：
const MyComp = () => {
const [state, setState] = useState();
const [result, setResult] = useState();
useEffect(() => {
const source = axios.CancelToken.source();
fetchResult({state, cancelToken: source.cancelToken }).then(setResult);
return () => {
source.cancel()
}
}, [state]);
return (
<div>{result}</div>
);
};
你有一個類似的 API，叫做AbortController
這將做的是，如果您的狀態發生變化，它將取消陳舊的請求，因此只有最后一個將解決（并設定結果）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318768.html
上一篇：承諾拼圖