使用帶有所需函數的 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]);