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

这个问题与eslint-plugin-react-hooks

当我在 CodeSanbox 中使用 React Sandbox 时，我可以使用 props 对象的单个属性作为 useEffect 挂钩的依赖项：

示例 1：

示例 1在 CodeSandbox 环境中给了我以下警告：

React Hook useEffect 缺少一个依赖项：'props.myProp'。包括它或删除依赖数组。(react-hooks/exhaustive-deps) eslint

如果我添加[props.myProp]到数组中，警告就会消失。

但是在我的本地环境中的 VSCode 中的相同示例 1，我收到以下警告：

React Hook useEffect 缺少依赖项：'props'。包括它或删除依赖数组。但是，当任何道具发生变化时，“道具”会发生变化，因此首选的解决方法是在 useEffect 调用之外解构“道具”对象，并在 useEffect.eslint(react-hooks/exhaustive-deps) 中引用那些特定的道具

是问我我错过了完整的props对象。如果我添加[props.myProp]到数组中，警告不会消失。尽管代码按预期工作。

我希望我会在 VSCode 的本地环境中获得与 CodeSandbox 相同的行为。

会发生什么？有什么我可以改变的配置eslint-plugin-react-hooks吗？

包裹

开发：

常规的

.eslintrc.json

在将依赖项从数组传递到 的第二个参数时useEffect，eslint 抛出以下错误

React Hook useEffect has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies

用法：

我有一个客户报告说，当他们使用 NPM 构建 React 应用程序时，他们在附加的屏幕截图中收到错误。“钩子只能在函数体内调用”。屏幕截图显示了错误，但对我来说毫无意义，当我运行相同的代码（相同的项目）时，我没有收到错误。我正在粘贴下面的完整代码，但您可以看到它与错误中的相同。我们都运行相同版本的 NPM。

这是我的文件：

在第 21 行，eslint 抱怨：

我怎样才能解决这个问题？

我正在尝试实现一个 useEffect 回调以在卸载组件之前调度一个操作。此操作的重点是存储组件的最后状态，以便下次加载该组件时可以从该状态恢复。我只希望在卸载时触发此回调。

当尝试为我的 useEffect 使用空依赖项数组时，“exhaustive-deps”规则会响应推荐的“eslint-plugin-react-hooks”要求，我包含了我试图坚持的值。这会导致效果，因此每次我存储状态时都会触发动作。

有没有更好的方法来处理这种情况，然后禁用这条线的 eslint？

这是我想要的：

eslint-plugin-react-hooks 想要它并导致在每次状态更改时调度操作的方式：

除了 useEffect 我还应该使用什么？

我正在尝试使用 React 挂钩来记忆回调。此回调专门使用在对象上定义的函数。

这会触发 eslint 规则react-hooks/exhaustive-deps。它希望我改为通过[field, key]。

如果我随后将代码更改为以下代码，即使看起来等效，我也不会收到任何警告：

为什么 eslint 在第一个示例中警告我？在这种情况下我可以放心地忽略它吗？

我正在使用 React useEffect 来更新状态。Eslint 警告我正在犯无阴影错误。我认为这与某些 eslint 或 eslint 插件设置有关，因为 CRA 不会导致相同的错误。如何解决？

在这里，setValue(value => value + 1);由于在 useState 中声明，该值导致无阴影。

我有一个关于 eslint-plugin-react-hooks 的问题。

我想减少执行 API 调用并将结果存储到状态中的样板代码，因此我创建了一个自定义挂钩：

现在自定义钩子效果很好，但 eslint-plugin-react-hooks 没有那么多。我的代码中的警告不是一个大问题。我知道我可以通过添加评论来消除此警告：

问题是自定义钩子参数之一是依赖列表，而 eslint-plugin-react-hooks 不会检测到缺少的依赖项。如何让 eslint-plugin-react-hooks 正确检测自定义挂钩的依赖项列表问题？甚至可以对自定义钩子进行这种检测吗？

关于这条规则有很多信息，但我真的认为应该有一些更好的方法来处理componentDidMount-alternative。

看起来它也让很多开发人员感到困惑，并且很难为最常见的用例编写变通方法：

https://github.com/facebook/react/issues/14920

在这里，我提供了一些确实不容易使用此规则设置的示例：

示例 1：应用程序的初始化 - 或在应用程序加载后检查 cookies/localstorage，并在上下文中设置它们：

在这里，我希望在加载应用程序后useEffect真正调用它，而不再调用。但是根据 eslint 我应该在 dept 数组中添加授权变量，但这是我真的不想做的事情。因为每次授权发生变化，整个INIT-Prozess都会一遍遍的重新开始。我认为非常需要在组件/或应用程序启动后触发的初始化功能，而不考虑以后更改变量？

示例 2：使用来自钩子的函数。react-i18next的一个例子：

在此示例中，我想在渲染组件或更改 someId 时获取所有数据。当数据加载或出现错误时 - 我使用我在钩子中获得的翻译函数t触发 toastr 消息。但我不想每次用户切换语言时都获取新数据。但是 eslint 希望我将 t 放入 deps 数组中，这会导致每次用户切换语言时重新渲染组件并加载新数据。而且，我们应该预料到未来会出现越来越多的此类钩子函数，我们最终可能希望在 useEffects 中使用它们。

示例 3：一个变量依赖于其他变量

如果我只希望在 value1 更改时，函数 doSomethingWithMyValue 将被触发，但不会在错误更改时触发。当我们将 error 放入useEffectsdeps 数组时，整个逻辑就被破坏了，因为每次 error 发生变化时都会触发 useEffect。这是我不想要的。

我还尝试使用已安装的变量和 进行某种解决方法useCallback，但是它看起来对我来说是useEffect不必要的多次触发，并且不知何故整个事情变慢了。

那么是否存在逻辑问题或者我们真的需要使用所有这些备忘录useCallbacks等来防止一些严重的问题？

感谢您的任何反馈！

我正在尝试在项目中安装和使用eslint-plugin-react-hooks插件。通常我会简单地运行 npm install 或 yarn add，但说明说要使用 react-scripts，因为我使用的是 create-react-app。我怎么做？我是否添加一个脚本并将其列为对 package.json 文件的依赖项，还是有其他方式？

任何帮助表示赞赏。