React - 更新多個 useEffect / useCallback 依賴項但只調用一次 effect

Question

我有一個基於過濾器和偏移量（頁面）更新的分頁數據列表 當偏移量更新（下一頁/上一頁）時，我點擊 API 並獲取新數據。 當過濾器更新時，我將偏移量重置為 0。

問題是，當過濾器更新和偏移量更新時，它會導致 useEffect 被觸發兩次。 依次調用 api 兩次。

const [filter, setFilter] = useState('All');
const [offset, setOffset] = useState(0);
onFilterChange = (value) => {
  setFilter(value);
  offset !== 0 && setOffset(0);
}

getDataFromAPI = useCallback(() => {
   const endpoint = `https://example.com/data?filter=${filter}&offset=${offset}`;
   CallApi(endpoint);
}, [offset, filter])

useEffect(getDataFromAPI, [getDataFromAPI]);

Answer 1

我認為解決方法是在這種情況下擺脫useEffect 。 有時它被不必要地使用。 只需使用設置的新值在onFilterChange和onOffsetChange處理程序中調用CallApi ，就可以了。

以下是 Dan Abramov 的一些相關引述：

事后看來，我個人的信念是，如果某些效果不能安全地過度發射（例如，發射兩次而不是一次），就會出現問題。 通常不能過火的事情與用戶操作（“購買”、“發送”、“完成”）有關。 動作在事件處理程序中開始。 使用它們！

總而言之，如果由於用戶做了某事而發生了某些事情，那么 useEffect 可能不是最好的工具。

另一方面，如果一個效果只是將某些東西（小部件上的谷歌地圖坐標）同步到當前狀態，useEffect 是一個很好的工具。 它可以安全地過度射擊。

---

PS 但請注意，我認為在您的情況下，react 會在過濾器更改處理程序中批處理兩個不同的設置狀態調用（因此調用渲染一次），但似乎沒有？ 在任何情況下，您可能仍然更喜歡我回答開頭的建議，以刪除useEffect 。