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。有时会不必要地使用它。只需在CallApi和onFilterChange处理函数中调用onOffsetChange，并设置新的值即可。

以下是Dan Abramov的一些相关报价：

事后看来，我个人的信念是无法安全地开火（例如，开火两次而不是一次），问题。通常情况下，不能过度激发的东西与用户有关动作（“购买”，“发送”，“完成”）。操作从事件处理程序开始。使用它们！

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

另一方面，如果效果仅同步了某些内容（Google 将窗口小部件上的坐标映射到当前状态，useEffect很好工具。而且它可以安全地开火。

PS但是请注意，我认为在您的情况下，react会在过滤器更改处理程序内对这两个不同的set状态调用进行批处理（因此调用一次渲染），但似乎没有？无论如何，您可能仍希望我的答案开头的建议删除useEffect。

React-更新多个useEffect / useCallback依赖项，但仅调用一次

1 个答案: