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

Question

我正在尝试使用钩子环绕我的头，但我遇到了一个重复的问题。在我在下面链接的示例中，我有一个对数组进行排序的 useEffect 钩子。排序顺序由状态值确定，我有一个按钮可以切换该状态值。

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

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

代码链接

感谢您的浏览，这对我来说真的很重要！

Answer 1

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

根据 @norbiTrial 之前的回答，隐藏错误不会解决问题，因为作用域中的每个依赖项都必须在依赖项数组中声明，避免它可能会导致意外的行为。

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