时间戳

首页 > 解决方案 > 在 UseEffect 中使用 `dispatch` 钩子

javascript - 在 UseEffect 中使用 `dispatch` 钩子

问题描述

dispatch当我的 React 组件卸载时，我想采取一些行动。因为我正在使用钩子，所以我不能使用componentWillUnmount. 相反，我使用的是useEffect钩子：

const dispatch = useDispatch();
useEffect(() => () => dispatch(setValue()), []);

上面的代码抛出警告“React Hook useEffect 缺少依赖项：'dispatch'。要么包含它，要么删除依赖项数组”。我不能包含dispatch在依赖项数组中，因为它会在更改useEffect时运行dispatch，但我希望它仅在组件卸载时运行；为此，我需要传递一个空数组。

如何在不从 babel 中删除相应的 linting 规则的情况下修复此警告？

标签： javascriptreactjs

解决方案

dispatch不应该改变，它是 redux store 提供的 dispatch 函数。然而，react hook linter 只是将其视为一个函数，并警告您它可能会发生变异。我认为您有语法错误，缺少括号。我认为应该是

useEffect(() => () => dispatch(setValue()), []);

不过，如有必要，您可以忽略该行的规则

// eslint-disable-next-line react-hooks/exhaustive-deps

用法

// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => () => dispatch(setValue()), []);

或（IMO 更容易阅读）

useEffect(() => {
  return () => dispatch(setValue());
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

推荐阅读