在 UseEffect 中使用 `dispatch` 钩子答案

【问题标题】：Use `dispatch` hook in UseEffect在 UseEffect 中使用 `dispatch` 钩子
【发布时间】：2020-05-08 15:21:05
【问题描述】：

我想在我的 React 组件卸载时 dispatch 一些操作。由于我使用的是钩子，所以我不能使用componentWillUnmount。相反，我使用的是useEffect 钩子：

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

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

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

【问题讨论】：

How to fix missing dependency warning when using useEffect React Hook?的可能重复

标签： javascript reactjs

【解决方案1】：

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
}, []);

【讨论】：