在这种情况下，有没有办法避免依赖项的无限循环并将正确的依赖项传递给 useEffect 挂钩？

Question

我有一个自定义钩子，它作为 arguments 之一获得回调并在useEffect中调用它

const customHook = (callback: Function) => {
  ...
  useEffect(() => {
    if (something) {
      callback();
    }
  }, [other things, callback]);

  return {values}
}

这里的问题是callback是 function 并导致useEffect在循环中运行。 useCallback建议在父组件中使用 useCallback。 所以我决定将此callback包装在我调用customHook useCallback 。

所以我的组件中会有这样的东西：

const memoizedCallback = useCallback(() => {
    myFunction(values);
  }, [values, myFunction]);

  const { values } = customHook(memoizedCallback);

在这里我有我的问题 - myFunction的依赖项是从customHook返回的，在它们定义之前我不能使用它们。 但是由于同样的原因，我也不能在customHook调用之后放置memoizedCallback 。

现在我被困在这个无限循环的依赖中，如果不忽略 eslint 警告，我不知道如何解决这个问题。

因此，任何想法和解决方案将不胜感激:)

Answer 1

如果更改回调不应导致执行useEffect块，请将callback设置为 ref：

const customHook = (callback: Function) => {
  const fn = useRef(callback);
  
  ...
  
  useEffect(() => {
    fn.current = callback;
  })
  
  useEffect(() => {
    if (something) {
      fn.current(); // fn.current?.() if fn.current might be undefined
    }
  }, [something]);

  return {values}
}