React Hook useEffect缺少依赖项：“颜色”和“选项”。包括它们或删除依赖项数组

Question

在发布之前，我尝试执行我的第一个React构建，并遇到如下React钩子错误：“React钩子useEffect缺少依赖项：'颜色'和'选项'。包括它们或删除依赖项数组。

我的组件在最后一行显示错误。我做错了什么？

function MemoryGame({ options, setOptions, highScore, setHighScore }) {
  const [game, setGame] = useState([]);
  const [flippedCount, setFlippedCount] = useState(0);
  const [flippedIndexes, setFlippedIndexes] = useState([]);

  const colors = [
    `url(${Background1})`,
    `url(${Background13})`,
    `url(${Background3})`,
    `url(${Background4})`,
    `url(${Background5})`,
    `url(${Background6})`,
    `url(${Background7})`,
    `url(${Background8})`,
    `url(${Background9})`,
    `url(${Background14})`,
    `url(${Background11})`,
    `url(${Background12})`,
  ];

  useEffect(() => {
    const newGame = [];
    for (let i = 0; i < options / 2; i++) {
      const firstOption = {
        id: 2 * i,
        colorId: i,
        color: colors[i],
        flipped: false,
      };
      const secondOption = {
        id: 2 * i + 1,
        colorId: i,
        color: colors[i],
        flipped: false,
      };

      newGame.push(firstOption);
      newGame.push(secondOption);
    }

    const shuffledGame = newGame.sort(() => Math.random() - 0.5);
    setGame(shuffledGame);
  }, []);

我刚刚添加了[颜色，选项]，但是现在我得到了这个：颜色数组使得use效应钩子（在第137行）的依赖关系在每次渲染时都会改变。将其移动到use效应回调中。或者，将颜色的初始化包装在自己的useMemo（）Hook中。

现在，我尝试移动使用效果中的常量颜色，并得到未定义。我还做错了什么？

  useEffect(() => {
    const colors = [
      `url(${Background1})`,
      `url(${Background13})`,
      `url(${Background3})`,
      `url(${Background4})`,
      `url(${Background5})`,
      `url(${Background6})`,
      `url(${Background7})`,
      `url(${Background8})`,
      `url(${Background9})`,
      `url(${Background14})`,
      `url(${Background11})`,
      `url(${Background12})`,
    ];
    const newGame = [];
    for (let i = 0; i < options / 2; i++) {
      const firstOption = {
        id: 2 * i,
        colorId: i,
        color: colors[i],
        flipped: false,
      };
      const secondOption = {
        id: 2 * i + 1,
        colorId: i,
        color: colors[i],
        flipped: false,
      };
      newGame.push(firstOption);
      newGame.push(secondOption);
    }
    const shuffledGame = newGame.sort(() => Math.random() - 0.5);
    setGame(shuffledGame);
  }, [colors, options]);

Answer 1

这是你的es-lint警告你，它认为你在依赖数组中丢失了这些项目。重要的是要注意，这只是显示一个错误，因为您的IDE设置会在棉绒错误时编译失败。

根据我的经验，这条规则极不一致。例如：有时您希望useEffect基于某些条件而不是其他条件激发。如果这些参数中的一个碰巧由于该触发器而发生更改（即在useEffect中发生了变化），您将得到此es lint警告。

我的建议是：更改您的IDE设置，使此警告仍然允许您编译。这可以通过修改eslint配置中的规则来更改。每当您看到此警告时，请仔细检查以确保您的use效应以正确的方式运行，并且您实际上没有丢失任何依赖项。如果是这种情况，请在use效应钩子的顶部添加一个es-lint忽略。

Answer 2

您需要在数组依赖项中添加颜色和选项

 const shuffledGame = newGame.sort(() => Math.random() - 0.5);
    setGame(shuffledGame);
  }, [colors,options]);

或者您可以使用//eslint-disable-next-line禁用规则

    setGame(shuffledGame);

  // eslint-disable-next-line
  }, []);

Answer 3

不要忽视这个警告，它有很好的理由。它的要点是告诉您，您正在使用对在钩子本身之外定义的变量的引用，这些变量可能会发生变化并使您处于过时状态。

useffecthook接受2个参数，第二个参数是依赖项数组——在您的例子中是空的。基于此数组，react知道何时应执行useffect中的回调。在您的情况下提供一个空数组将导致回调在组件的初始呈现之后只运行一次，并且无论组件中发生什么更改，都不会再运行。因此，即使您更改颜色和选项引用，钩子也不会执行，您将处于过时状态，因此会发出警告。但是，您的代码实际上依赖于这两个引用，因此您应该将它们放在依赖项数组中，以便在它们中的任何一个发生更改时（即使它们是常量，并且您知道不会更改），react都会重新运行回调函数。因此，请使用以下命令：

  useEffect(() => {
    const newGame = [];
    for (let i = 0; i < options / 2; i++) {
      const firstOption = {
        id: 2 * i,
        colorId: i,
        color: colors[i],
        flipped: false,
      };
      const secondOption = {
        id: 2 * i + 1,
        colorId: i,
        color: colors[i],
        flipped: false,
      };

      newGame.push(firstOption);
      newGame.push(secondOption);
    }

    const shuffledGame = newGame.sort(() => Math.random() - 0.5);
    setGame(shuffledGame);
  }, [colors, options]);

基本上，如果变量（包括函数）仅在useffect回调中使用，则应该在内部定义它，并且可以跳过将其添加到依赖项数组，因为它可以在内部跟踪它。在极少数情况下，如果useffect只依赖于变量的初始状态（之后可能会发生变化），并且只希望在组件“setup”上运行一次挂钩，则应跳过将其添加到依赖项数组中，而不会导致其重新执行。