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 。