问题标签 [eslint-plugin-react-hooks]

当您调用“内置”钩子之一时，该react-hooks/exhaustive-deps规则足够聪明，可以识别 React 保证某些返回值是不变的。useState由和useReducer钩子返回的状态更新程序和调度程序就是这种情况。

在第一个示例中，调用useCallback不需要将状态设置器列为依赖项：

但在第二个示例中，setter 由自定义钩子返回，它是必需的。

有没有办法告诉 eslint 规则，我的自定义钩子返回的 setter 不会改变，并且不需要将其列为依赖项？这将有助于删除一些代码。

注意：我已经阅读了 React 常见问题解答，这个 StackOverflow 问题，并且我知道添加不会改变的依赖项没有性能成本。

但由于这种行为可用于内置钩子，我想知道是否有办法为自定义钩子获得相同的效果。

我有一个用例，页面必须在第一次渲染和单击按钮时调用相同的 fetch 函数。

代码类似于以下代码（参考：https ://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx ）：

对我来说，问题是 fetch 函数总是在任何输入更改时触发，因为eslint-plugin-react-hooks强制我在useCallback钩子中声明所有依赖项（例如：选定状态）。我必须useCallback使用它才能与useEffect.

我知道我可以将函数放在组件之外并传递所有参数（props、setLoading、setError、..等）以使其正常工作，但我想知道是否可以在保留相同效果的同时存档组件内部的 fetch 函数并遵守eslint-plugin-react-hooks?

[更新] 对于有兴趣查看工作示例的任何人。这是从接受的答案派生的更新代码。 https://stackblitz.com/edit/stackoverflow-question-bink-62951987-vxqtwm?file=index.tsx

我不确定这是一个错误，但我需要一个解释。考虑以下代码：

ESLint 规则不会给出任何有关缺少或错误依赖项的警告，但是，以下代码会给出有关缺少someObj依赖项的警告：

有人可以解释一下，为什么第二个示例会产生警告？或者它实际上是一个错误？使用 4.0.8 版本的eslint-plugin-react-hooks包

我有以下组件：

目前，我if(data)是毫无意义的，但是如果我想检查当前data状态，然后根据状态运行异步函数，eslint(react-hooks/exhaustive-deps)告诉我钩子缺少data依赖项，它就是。当我将数据添加到导致无限循环的依赖项列表时，问题就出现了。

知道如何解决这个问题吗？感觉它应该是相当简单的模式，但是我发现的所有内容都建议使用扩展setState(prev => prev + 1)重载，在这种情况下对我没有帮助。

我目前坚持如何构建我的逻辑，而exhaustive-deps在我的useEffect.

我的目标是在位置更改时跟踪导航（输入页面日期、离开页面日期和位置）。

我正在使用useLocation()ofreact-router-dom和useLastLocation()of react-router-last-location。

这工作正常，但我的useEffect依赖项数组应该包含date没有exhaustive-deps警告，但添加它会产生无限循环。

正确的方法是什么？

这是一个演示：https ://stackblitz.com/edit/react-ts-rttbjn

这个演示按我的意愿工作。但是在 中PagingList.tsx，会抛出 ESLint 警告：

但是使用[loadAfter]不起作用。

所以我很困惑，为什么loadAfter重新渲染时会改变？最佳做法是什么？

PS：非工作演示，无限重新渲染：https ://stackblitz.com/edit/react-ts-kl67zc

主要代码片段：

PS: .eslintrc.js:

index.tsx：

PagingList.tsx [Workable but with error]：

PagingList.tsx [Not Working but no warning]：

我有一个可以通过两种方式触发的搜索组件。一种由用户键入（去抖动），另一种由按钮重试。react-hooks/exhaustive-deps的建议实际上给我带来了一个错误，因为当我只想要第一个触发时，观看searchTerm会触发两种效果。我应该采取另一种方法吗？

我还注意到在该规则的官方讨论中，@StevenMyers32 的问题没有得到解决（他有一个代码框示例），他的示例似乎是“如果我包含此依赖项，useEffect 将错误地触发”的类似问题。

在您将其标记为重复之前 - 请理解我已尝试关注此处关于 SO 的大部分文章，但它们似乎都没有帮助我，也许我忽略了某些东西，或者我今天有一个大脑放屁。所以请原谅我再次问这个问题。

在我的组件中，我有以下代码要点。

正如您可以从上面的代码中验证的那样，我只在我的 useEffect 中使用了 teamid。我没有使用整个道具对象。但是，React 仍然抱怨此消息

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

请让我知道我在这里做错了什么。任何帮助将不胜感激。

问题是我试图将 prop 用作 useState 的初始状态，它来自商店和页面刷新后异步获取，这个 prop 是未定义的，我如何在调用之前加载 props，请检查下面的代码。

逻辑：第一次通过 redux 来自商店的道具我重定向到这个页面，页面刷新后一切正常，我收到了我在下面发送的错误。

ps 我隐藏导入并从代码片段连接 func 以减少代码。

错误图像

mainPage 刷新 后出现错误

我写了这个钩子（可能有错误，我还没有使用它）：

有没有办法可以使这个钩子的详尽-deps 规则 lint 用法？

在这种用法中，我想被告知a,b和c需要在依赖数组中。