用useCallback进行无限更新循环(deps钩子/详尽-deps)

Question

考虑下面的示例，该示例呈现iframe的列表。

我想将呈现的iframes的所有iframe存储在frames中。

import React, { useState, useEffect, useCallback } from "react";
import Frame, { FrameContextConsumer } from "react-frame-component";

function MyFrame({ id, document, setDocument }) {
  useEffect(() => {
    console.log(`Setting the document for ${id}`);
    setDocument(id, document);
  }, [id, document]); // Caution: Adding `setDocument` to the array causes an infinite update loop!

  return <h1>{id}</h1>;
}

export default function App() {
  const [frames, setFrames] = useState({
    desktop: {
      name: "Desktop"
    },
    mobile: {
      name: "Mobile"
    }
  });
  const setFrameDocument = useCallback(
    (id, document) => {
      setFrames({
        ...frames,
        [id]: {
          ...frames[id],
          document
        }
      });
    },
    [frames, setFrames]
  );

  console.log(frames);

  return (
    <div className="App">
      {Object.keys(frames).map(id => (
        <Frame key={id}>
          <FrameContextConsumer>
            {({ document }) => (
              <MyFrame
                id={id}
                document={document}
                setDocument={setFrameDocument}
              />
            )}
          </FrameContextConsumer>
        </Frame>
      ))}
    </div>
  );
}

这里有两个问题：

1. react-hooks/exhaustive-deps正在抱怨依赖数组中缺少setDocument。但是，添加它会导致无限更新循环。
2. 控制台日志记录frames显示，只设置了移动的document。我希望桌面的document也会被设置。

你要怎么解决这个问题？

码箱

Answer 1

const setFrameDocument = useCallback(
    (id, document) => setFrames((frames) => ({
      ...frames,
      [id]: {
        ...frames[id],
        document
      }
    })),
    []
  );

https://codesandbox.io/s/gracious-wright-y8esd

由于状态的更新，框架对象的引用不断变化。对于前面的实现(即依赖数组中的frames对象)，它将引起连锁反应，从而导致组件重新呈现，并导致frames对象获得新的引用。这会永远持续下去。

仅使用setFrames函数(一个常量引用)，这个链反应就不会传播。eslint知道setFrames是一个常量引用，所以它不会向用户抱怨依赖数组中缺少它。