如何在没有依赖关系的情况下修复 react-hooks/exhaustive-deps linting 错误答案

【问题标题】：How to fix a react-hooks/exhaustive-deps linting error with no dependency如何在没有依赖关系的情况下修复 react-hooks/exhaustive-deps linting 错误
【发布时间】：2019-11-21 08:11:13
【问题描述】：

我有一个 linting 错误 (react-hooks/exhaustive-deps)，我目前正在两行禁用该错误。我理解代码是如何违反规则的，但我不明白为什么这条规则适用于这种情况。

我希望效果仅在组件卸载时运行以进行清理。我有一个函数，clearMessages，它继承自 props，它将减速器的状态重置为空的默认状态。当我在本地运行我的项目时它工作正常，但是当我运行构建时 react-scripts 抛出上述 linting 错误并且构建失败。

这是一个简短的 sn-p，显示了导致问题的效果。


const Search = ({ clearMessages }) => {

useEffect(() => () => clearMessages(), [])

...
...

}

这是 react-scripts build 抛出的错误消息。

第 25 行：React Hook useEffect 缺少依赖项： '清除消息'。包括它或删除依赖数组。如果 'clearMessages' 变化太频繁，找到父组件定义它并将该定义包装在 useCallback react-hooks/exhaustive-deps

我不希望clearMessages 改变，所以我不确定为什么将它作为依赖项提供很重要。我不希望只在clearMessages 的值发生变化时运行效果。

【问题讨论】：

How do I fix missing dependency in React Hook useEffect的可能重复

标签： reactjs react-hooks

【解决方案1】：

如果clearMessages没有变化，则相当于一个空的依赖数组——[]。

无论哪种方式，因为“我不希望 clearMessages 改变”你应该像 linter 建议的那样在 dep 数组中使用它。

const Search = ({ clearMessages }) => {

// Equivalent to an empty dependency array !if! clearMessages never change.
useEffect(() => () => clearMessages(), [clearMessages])

上面提到的useEffect有两个阶段：

useEffect 将在 clearMessages 更改时运行（如果没有，它将仅在组件挂载上运行）。
通过指定返回回调，回调将在组件卸载时运行。

Quote from docs: React 究竟何时清理效果？ React 在组件卸载时执行清理。

【讨论】：

感谢您的回复。当我阅读有关钩子的文档时，它说如果您提供依赖项，它只会在该依赖项更改时调用在 useEffect 中返回的函数。即使 clearMessages 仍然是同一个函数，当组件卸载时仍然会调用它吗？

【解决方案2】：

除了上面的答案，我发现这个文档对于在存在功能依赖时重新组织我的 useEffect 非常有帮助：

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

【讨论】：