React 钩子上缺少依赖项 linting 错误

Question

我在 React function 组件中使用useEffect ，如下所示：

useEffect(() => {
  const handleRouteChangeComplete = () => {
    window.scrollTo(0, 0);
    userInterface.dispatch(closeNavigation());
  };

  Router.events.on('routeChangeComplete', handleRouteChangeComplete);
}, []);

useEffect 上的第二个（数组）选项给了我以下useEffect错误：

React Hook useEffect has a missing dependency: 'userInterface'. Either include it or remove the dependency array. eslint(react-hooks/exhaustive-deps)

我认为 linting 错误中的任何一个选项都不正确。

• 我只想初始化一次事件监听器。
• 如果我删除数组选项， useEffect将表现得像componentDidUpdate并且可以多次执行代码
• 如果我将userInterface添加为对useEffect的依赖项，如果该上下文更新，它也会多次执行代码

我在这里遗漏了什么还是棉绒迫使我写出不正确的逻辑？

我会在这一个实例中禁用该规则，但我的应用程序中有 4 个其他类似错误的实例。

Answer 1

eslint 错误是有原因的，这是为了防止由于陈旧值而难以注意到的错误。 本质上，lint 错误只是告诉您，您的 userInterface 变量将在效果中过时。

忽略该错误不一定是一个好主意，因为如果您添加更多依赖项，您可能不会意识到为什么事情没有像您期望的那样更新。

关于同一件事的另一篇文章：

useEffect 依赖数组和 ESLint 穷举-deps 规则

https://github.com/facebook/create-react-app/issues/6880

您应该记住的一件主要事情是确保清理您的操作，无论它是否仅在安装时完成，因为如果您不清理它，有时效果可能会超出组件的生命周期。

你有几个不同的选项来解决这个问题，如果调度是稳定的（基于名称，它通常是稳定的），那么你可以从 userInterface 变量中提取调度，然后将它添加到依赖数组中。

const { dispatch } = userInterface;

useEffect(() => {
  const handleRouteChangeComplete = () => {
    window.scrollTo(0, 0);
    dispatch(closeNavigation());
  };

  Router.events.on('routeChangeComplete', handleRouteChangeComplete);
  () => {
    Router.events.off('routeChangeComplete', handleRouteChangeComplete);
  };
}, [dispatch]);

如果提取调度值不是一个选项，那么您可以使用 ref 来确保以稳定的方式保持最新版本的 userInterface。 有时这是一项足够常见的任务，您可能希望将逻辑提取到自定义挂钩以获取值的引用。

const userInterfaceRef = useRef(userInterface);
useEffect(() => {
  userInterfaceRef.current = userInterface;
}, [userInterface]);

useEffect(() => {
  const handleRouteChangeComplete = () => {
    window.scrollTo(0, 0);
    userInterfaceRef.current.dispatch(closeNavigation());
  };

  Router.events.on('routeChangeComplete', handleRouteChangeComplete);
  () => {
    Router.events.off('routeChangeComplete', handleRouteChangeComplete);
  };
}, []);

这里看似额外的 useEffect 的原因是因为除非您确定 userInterface 永远不会更改，否则您需要保持它是最新的，否则 userInterfaceRef 将过时。 我制作 userInterface 的 ref 而不是调度 function 的原因是因为这样您可以在效果中使用 userInterface 的其他属性而不会出现任何问题。

如果您需要在效果中包含不想重新启动效果的依赖项，请使用我描述的 ref 选项来确保您拥有最新的值，而无需在每次更改时重新运行效果。

如果您在效果中强制添加 on 处理程序，您应该确保清理它。 养成一个好习惯。