javascript - 当数组作为依赖项传递时，React 中的 useEffect 会在无限循环中运行

Question

当以下代码在 React 组件中运行时，会导致无限循环。为什么将数组作为 useEffect 的依赖项传递(在本例中为 args)会导致这种情况发生？如何阻止无限循环的发生？该代码应该只运行一次。

我读到我可以使用[args.length]来阻止这种情况发生，但是ESLint规则react-hooks/exhaustive-deps抛出一个错误，所以我想避免这样做。

import React, { useEffect, useState } from 'react';

export default function Home() {
  const args = ['a'];
  const [value, setValue] = useState(['b']);

  useEffect(() => {
    setValue(['c']);
  }, [args]);

  console.log('value', value);
}

请注意，在上面的代码中，我什至在 useEffect 回调中根本没有使用或修改 args。

如果我将 args 的值更改为字符串，例如 const args = 'a'，则不会出现无限循环。因此，当依赖项是数组时，似乎会出现问题。

Answer 1

问题是对 args 的任何更改都会导致您的效果运行。此时您setValue(args)因此args再次更改。这将导致您的效果再次运行...因此是无限循环。

如果将 args 设置为与之前相同的字符串，并且它们按照 React 检测更改的方式匹配，则不会将其注册为更改。这不适用于数组或对象。 {test: 'a'} !== {test: 'a'} 和 ['a'] !== ['a'] 但 ' a' === 'a' 和 1 === 1。

我也遇到了你的问题。我最终禁用了react-hooks/exhaustive-deps规则。但我有更多数据给你。我花了一段时间努力尝试使用这个规则。

This post我提出的问题与你的问题非常相似。最终结果是您应该使用 setState 作为函数(即示例中的 setState(oldState => oldState) )，此时旧状态不需要是一个依赖项或 useReducer 也能产生相同的效果。

但是，这些都可能与您可能尝试做的事情无关，这会产生更多问题，如 post 中所示。我后来做了。如果它们是纯净的，那就没问题。

1st post上的第四个解决方案描述了如何积极避免这个问题，但最终我决定使用react-hooks/exhaustive-deps规则，并在我故意删除不需要的依赖项时逐行禁用它。我不同意在这一切之后这应该成为一条规则。

您想要解决的问题是平衡 React 的 useState 和 useReducer 纯粹的要求与详尽的 deps 的要求。我认为这需要做大量工作才能满足这些要求而不是实际生产力。