ESLint 希望 setSate 作为 useEffect 的依赖项，但这会导致无限循环（react-hooks/exhaustive-deps）

Posted 2023-02-21

【中文标题】ESLint 希望 setSate 作为 useEffect 的依赖项，但这会导致无限循环（react-hooks/exhaustive-deps）

【英文标题】：ESLint wants setSate as a dependency for useEffect but this causes an infinite loop (react-hooks/exhaustive-deps)

【发布时间】：2020-04-03 20:40:52

【问题描述】：

我有以下情况：

  const [values, setValues] = useState(
    username: "",
    password: ""
  );

  const [submitButton, setSubmitButton] = useState(
    disabled: true
  );

 useEffect(() => 
    const disabled = !(values.username.length && values.password.length);

    setSubmitButton( ...submitButton, disabled );
  , [values]);

这工作得很好，完全符合我的要求，但 ESLint 抱怨 react-hooks/exhaustive-deps 警告。

当我执行 eslint autofix 时，它会将 setSubmitButton 添加为 useEffect 的依赖项，但这会导致无限循环。这似乎是一个简单的情况，但我无法弄清楚我做错了什么。我已经看到其他人的代码在 useEffect 中使用 setState 等而不将其声明为依赖项。

【参考方案1】：

您应该使用useState 的functional updater form，它将提供您状态的快照，从而无需直接引用它。

setSubmitButton(previous => ( ...previous, disabled ));

由于React 已经知道submitButton 的当前值，并且只会在更改状态时运行回调，这将在您的组件范围之外发生，eslint 不会对您生气。 在Dan's的话

我喜欢将这些情况视为“错误依赖”。是的，计数是 一个必要的依赖，因为我们在里面写了 setCount(count + 1) 影响。然而，我们只需要 count 将其转换为 count + 1 并将其“发送回”给 React。但是 React 已经知道当前的计数。我们需要告诉 React 的只是增加状态—— 不管现在是什么。

Font

【讨论】：

非常感谢！这正是我所需要的。

如果我需要直接引用该状态怎么办？我有一个用例，我必须更新该状态并根据该状态更新另一个状态。

这太模糊了。请考虑将帖子作为一个问题，对您的问题进行更详细的描述