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)ESLint 希望 setSate 作为 useEffect 的依赖项，但这会导致无限循环（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 等而不将其声明为依赖项。

【问题讨论】：

标签： javascript reactjs jsx react-hooks

【解决方案1】：

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

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

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

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

Font

【讨论】：

非常感谢！这正是我所需要的。
如果我需要直接引用该状态怎么办？我有一个用例，我必须更新该状态并根据该状态更新另一个状态。
这太模糊了。请考虑将帖子作为一个问题，对您的问题进行更详细的描述