Question

我有一条掉线错误（react-hooks/exhaustive-deps），目前正在两行禁用。我了解代码是如何违反规则的，但是我不明白为什么此规则适用于这种情况。

我希望效果在组件卸载时仅出于清理目的而运行。我有一个函数clearMessages，它从props继承而来，这些props将reducer的状态重置为空的默认状态。当我在本地运行项目时，它可以很好地运行，但是当我运行构建时，react-scripts会抛出上述错误消息，并且构建失败。

这是一个简短的代码段，显示了导致问题的原因。


const Search = ({ clearMessages }) => {

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

...
...

}

这是react-scripts构建引发的错误消息。

第25行：React Hook useEffect缺少依赖项： “ clearMessages”。包括它或删除依赖项数组。如果 'clearMessages'更改过于频繁，请找到定义它并将该定义包装在useCallback中反应钩/详尽的下降

我不希望clearMessages发生变化，因此我不确定为什么将其作为依赖项提供给我很重要。我不希望clearMessages的值更改时效果只能运行。

Answer 1

如果clearMessages不变，则相当于一个空的依赖项数组-[]。

无论哪种方式，因为“我不会期望 clearMessages会发生变化”，所以您应该像棉绒短绒建议的那样在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进行清理。

Answer 2

关于上述答案，我发现此文档对于在存在功能依赖性时重新组织useEffect很有帮助：

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

如何解决无依赖的react-hooks / exhaustive-deps掉毛错误

2 个答案: