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

Question

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

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

这是一个简短的片段，显示了导致问题的效果。

const Search = ({ clearMessages }) => {

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

...
...

}

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

第 25 行：React Hook useEffect 缺少依赖项：'clearMessages'。包括它或删除依赖数组。如果“clearMessages”更改过于频繁，请找到定义它的父组件并将该定义包装在 useCallback react-hooks/exhaustive-deps

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

标签： reactjsreact-hooks

Answer 1

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

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