ESLint 希望 setSate 作为 useImpact 的依赖项，但这会导致无限循环(react-hooks/ex

Question

我有以下情况：

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 自动修复时，它会添加setSubmitButton作为依赖项来使用 Effect，但这会导致无限循环。这似乎是一个如此简单的情况，但我无法弄清楚我做错了什么。我见过其他人在useEffect中使用setState等的代码，而没有将其声明为依赖项。

Answer 1

您应该使用useState的功能更新程序形式，它将提供状态的快照，从而消除了直接引用它的需要。

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

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

我喜欢将这些情况视为"虚假依赖"。是的，计数是 一个必要的依赖关系，因为我们在 影响。但是，我们只需要计数即可将其转换为计数 + 1 并将其"发回"给 React。但是 React 已经知道当前的计数。我们只需要告诉 React 递增状态—— 不管现在是什么。

字体