2

我有一个基于过滤器和偏移量（页面）更新的分页数据列表当偏移量更新（下一页/上一页）时，我点击 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]);
4

1 回答 1

2

useEffect我认为解决方法是在这种情况下摆脱。有时它被不必要地使用。只需使用设置的新值调用CallApi和onFilterChange处理onOffsetChange程序，就是这样。

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

事后看来，我个人的信念已经变成，如果某些效果不能安全地过度发射（例如，发射两次而不是一次），就会出现问题。通常不能过火的事情与用户操作（“购买”、“发送”、“完成”）有关。动作从事件处理程序开始。使用它们！

总而言之，如果由于用户做了某事而发生了某些事情，那么 useEffect 可能不是最好的工具。

另一方面，如果效果只是将某些东西（小部件上的谷歌地图坐标）同步到当前状态，那么 useEffect 是一个很好的工具。它可以安全地过火。

PS但请注意，我认为在您的情况下，react 会在过滤器更改处理程序中批处理两个不同的设置状态调用（因此调用一次渲染），但似乎不是？无论如何，您可能仍然更喜欢我回答开头的建议来删除useEffect。

于 2020-11-10T18:08:12.863 回答