Question

我需要一些帮助{ subject: "arg", body: {contentType: "HTML", content: "arg"}, start: {dateTime: "2020-03-03T03:00:00", timeZone: "Pacific Standard Time"}, end: {dateTime: "2020-03-03T04:00:00", timeZone: "Pacific Standard Time"}, attendees: [] } { originalStartTimeZone: "UTC", originalEndTimeZone: "UTC", start: { dateTime: "2020-03-03T03:00:00.0000000", timeZone: "UTC" }, end: { dateTime: "2020-03-03T04:00:00.0000000", timeZone: "UTC" } }来解决。我只希望在eslint更改后才能运行效果，但是react-hooks/exhaustive derps却大叫我添加listenToMe。这导致递归。在遵守该规则之前，react-hooks/exhaustive derps对我来说是金牌。

ESLint：React Hook useEffect缺少依赖项：“历史记录”。要么包含它们，要么删除依赖项数组。（react-hooks / exhaustive-deps）

有人可以帮我理解吗？

为什么只听您在useEffect中关心的更改是不好的做法？
只听状态变化的特定变化的“正确”方法是什么？

history

我已经阅读了github并做出了反应，但是我还没有阅读任何点击的内容。

https://github.com/facebook/create-react-app/issues/6880
https://reactjs.org/docs/hooks-rules.html
还有很多...

Answer 1

来自文档

只有在不依赖项列表中没有任何函数（或由其调用的函数）引用prop，状态或从它们派生的值的情况下，才可以从依赖项列表中省略该函数。

当您使用传递的道具或在历史案例中，历史道具来自HOC或来自react-router的钩子时，就会出现问题。

首先，它作为道具通过，道具可以固有地发生变化。

第二，您要调用history.push函数。 linter不知道push将始终与history类的功能相同，并且该功能不会使用任何状态或道具本身。

facebook所说的“正确”方法是将函数移到效果内，但是如果您只是重用某些文件中的代码或使用诸如history.push之类的函数，那是没有意义的。因此，我认为在您的情况下，解决方案是将其包装在具有历史记录的useCallback中，并将其包装在自己的依赖数组中。根据开发人员的说法，这是不得已的方法。

基本上，useCallback只会返回一个已记忆的值，而不是实际访问该值，并且只要依赖项中的值发生更改，就会有一个带有新的已记忆值的新回调。

History.push当然总是具有相同的标识，因此有点反模式。

我个人从来没有遇到过像这样传递值的任何问题。因此，我认为在处理其他地方声明的函数（或任何完全稳定的变量）时编写useCallback是没有意义的，并且我认为跳过该行是合理的。

不过，正如其他人指出的那样，我将规则保持启用状态，因为这可以使您对写作效果保持警惕。

Answer 2

此eslint规则仅在大多数情况下有用，但是在某些情况下，您必须忽略它。

React.useEffect(()=> {

  // I have some code with dependencies here but I only want to run it on mount

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

Answer 3

反应已禁用自动修复程序 https://github.com/facebook/react/issues/15204

我安装了新的devDependancies（eslint@latest和eslint-plugin-react-hooks）

npm install eslint@latest eslint-plugin-react-hooks@latest --save-dev

我在IntelliJ IDEA 2020.1（EAP Build＃IU-201.5985.32）中进行了测试，它显示警告，但是ESLint Fix 不会自动添加依赖项到useEffect

IntelliJ中的ESLint警告

ESLint：React Hook useEffect缺少依赖项：'dispatch'。包括它或删除依赖项数组。如果“调度”的更改过于频繁，请找到定义它的父组件，然后将该定义包装在useCallback中。（react-hooks / exhaustive-deps）

VS Code在预发行版2.1.0-next.1中具有“修复”，但我尚未对其进行测试。

https://github.com/microsoft/vscode-eslint/pull/814#issuecomment-587020489 https://github.com/microsoft/vscode-eslint/releases/tag/release%2F2.1.0-next.1

这不能回答问题，但是对遇到react-hooks/exhaustive-deps自动“修复”问题的人有帮助。

Eslint反应钩/详尽的derps递归

3 个答案: