useEffect 清理函数 Typescript 错误：不可分配给“EffectCallback”类型的参数答案

【问题标题】：useEffect cleanup function Typescript error: not assignable to parameter of type 'EffectCallback'useEffect 清理函数 Typescript 错误：不可分配给“EffectCallback”类型的参数
【发布时间】：2021-01-31 16:39:20
【问题描述】：

我有这段代码应该执行以下操作：

在第一次渲染后调度 thunk 加载数据
调度动作以重置状态作为该效果的清理函数

由于dispatch 和slug 在组件生命周期内不会发生变化，所以清理基本上会在组件卸载后运行。

const dispatch = useDispatch();
const slug = props.match.params.slug || "";

useEffect(() => {
  dispatch(THUNKS.LOAD_DATA(slug));
  return () => { dispatch(ACTIONS.RESET_STATE()); };
},[dispatch,slug]);

一切都按预期工作。但我想把清理函数写成：

return () => dispatch(ACTIONS.RESET_STATE());

我知道箭头函数会添加一个隐含的return 语句，如果我这样写的话。所以基本上我正在返回dispatch() 电话。

因此，Typescript 抱怨以下错误消息：

Argument of type '() => () => { payload: undefined; type: string; }' is not assignable to parameter of type 'EffectCallback'.

我认为正在发生的事情：EffectCallback 可能期待 void 成为 return，突然间我返回了一个 dispatch() 电话。

我可以自定义键入EffectCallback 以某种方式接受此返回调用并消除此错误吗？

【问题讨论】：

标签： reactjs typescript use-effect

【解决方案1】：

问题是dispatch 实际上返回了动作对象，所以它不是void 函数。您只想忽略返回的值。

我有一个可能看起来很愚蠢的解决方案，除非这是您经常使用的模式，因为我们所做的只是将花括号移到另一个地方。但它可能是一个地方而不是多个地方。

我们可以用我们自己的自定义版本覆盖useDispatch，而不是弄乱打字稿定义。

import { useDispatch as useRegularDispatch } from "react-redux";
import { Action, AnyAction } from "redux";

export interface VoidDispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): void;
}

export const useDispatch = <A extends Action = AnyAction>(): VoidDispatch<A> => {
  const regularDispatch = useRegularDispatch();

  return (action: A) => { regularDispatch(action); };
};

然后您可以在useEffect 清理中使用dispatch 而不会出现任何问题。

【讨论】：