useEffect缺少一个依赖项，但是当我添加它时，出现“超出最大更新深度”错误

Question

我正在尝试使用钩子缠住我的头，并且遇到一个重复的问题。在下面链接的示例中，我有一个useEffect挂钩，用于对数组进行排序。排序顺序由状态值确定，我有一个用于切换状态值的按钮。

一切都按照我预期的方式工作，在安装组件时对数组进行排序，然后单击按钮。

但是，我从linter收到一个错误，需要在useEffect挂钩中将值的数组声明为依赖项。如果这样做，我会收到“超出最大更新深度”错误。我不确定该怎么办，我们将不胜感激！

Link to code

感谢您的光临，对我来说真的很重要！

Answer 1

我看不到您的代码有任何问题。我要做的只是通过添加// eslint-disable-next-line react-hooks/exhaustive-deps如下来忽略警告：

useEffect(() => {
    function sortValues() {
      let sorted;
      const array = [...values];
      if (ascValue) {
        sorted = array.sort((a, b) => a - b);
      } else {
        sorted = array.sort((a, b) => b - a);
      }

      setValues(sorted);
    }

    sortValues();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ascValue]);

也许是sortValues()的缩写：

function sortValues() {
    const compare = ascValue ? (a, b) => a - b : (a, b) => b - a;
    setValues([...values].sort(compare));
}

我希望有帮助！

Answer 2

您是否尝试更改范围？

  function sortValues() {
    let sorted;
    const array = [...values];
    if (ascValue) {
      sorted = array.sort((a, b) => a - b);
    } else {
      sorted = array.sort((a, b) => b - a);
    }
    setValues(sorted);
  }

顺便说一句-干净，很棒的代码。

Answer 3

理想情况下，您将添加一些条件/检查以查看values是否已具有所需的值。由于setValues似乎在每个渲染上都被调用，从而触发了重新渲染，即无穷大。

useEffect(() => {
    function sortValues() {
      let sorted;
      const array = [...values];
      if (ascValue) {
        sorted = array.sort((a, b) => a - b);
      } else {
        sorted = array.sort((a, b) => b - a);
      }

      if (values !== sorted) { // This is just an example, it will probably always be true.
        setValues(sorted);
      }
    }

    sortValues();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ascValue]);

重点是，useEffect不应在每次调用时都设置状态。

Answer 4

这并不令人惊讶-当您在依赖项数组中添加值列表时，useEffect将在值列表的每次更改时执行-导致无限循环:)

根据@norbitrial的先前答案，隐藏错误将无法解决问题，因为必须将范围内的每个依赖项都声明在依赖项数组中，避免它可能导致意外的行为。

我建议在这种情况下考虑使用useReducer。这将导致可以将对依赖项数组的修改逻辑移出useEffect钩子的作用域-并且您不会被迫将其作为useEffect的依赖项附加。