javascript - 自定义 useFetch Hook 中的无限循环

Question

所以我不确定到底是什么导致了这个问题或如何正确解决这个问题。

我有一个自定义的 useFetch Hook 来获取数据。它唯一特别的地方是你可以提供一个函数来修改获取的结果。 useFetch 钩子(Hook)是由某个我无法再联系到的人编写的。

这是一个完整的、独立的codesandbox示例来重现这一点:

https://codesandbox.io/s/optimistic-lalande-glhg3?file=/src/App.js:192-326

您可以看到所选行 (192-326) 已被注释掉。它是组件上方对象的副本。

当在组件内部的 init-object 中进行注释时，useFetch 钩子(Hook)开始无限地获取 url。

这可能与变量或值的更改/重新渲染有关，但我不明白。

Answer 1

每次渲染都会使用新引用创建新对象init，但内容是相同的。然后这个效果跟踪这个引用并执行状态更新。那么状态更新会导致重新渲染，从而导致新的初始化对象触发效果...

 useEffect(() => {
    setLoading();
    [...successModifiers, (result) => setResource(result)].reduce(
      (previous, current) => previous.then(current).catch(setError),
      fetch(url, init).catch((error) => setError(error))
    );
  }, [url, init, successModifiers]);
//         ^^^^^

要解决这个问题，您可以使用 useMemo 持久化对象引用:

const init = useMemo(() => ({/*...*/}));

但这可能会使 useFetch 的使用有点笨拙，因此替代方案是基于深度比较将对象持久保存在 useFetch 中。像这样的事情:

function useDeepMemo(object) {
  const ref = useRef(object);

  if (!deepEquals(object, ref.current)) {
    ref.current = object;
  }

  return ref.current;
}