使用带有所需函数的 useEffect 时的无限循环

Question

我正在开发仪表板并制作自定义挂钩。 它用于排序和过滤表。

每次更改排序或过滤字段时，我都需要重新获取新字段。 所以我试图使用useEffect但我有一个无限循环，因为 linter 告诉我我必须包含onRefetch()函数

useEffect(() => {
    onRefetch();
  }, [onRefetch, sort]);

如果我从依赖项中删除onRefetch ，它可以完美运行，但 linter 失败。

有任何想法吗？

谢谢！

Answer 1

你试过useCallback吗？

const memoizedOnRefetch = useCallback(() => onRefetch(), []);

useEffect(() => {
    memoizedOnRefetch();
  }, [memoizedOnRefetch, sort]);

Answer 2

由于您的目的，您应该禁用 eslint。

  useEffect(() => {
    onRefetch();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sort, filter]);