useEffect TypeScript 错误中的 Redux 操作？

Posted 2023-02-22

【中文标题】useEffect TypeScript 错误中的 Redux 操作？

【英文标题】：Redux action in useEffect TypeScript error?

【发布时间】：2020-07-13 04:07:49

【问题描述】：

在页面加载时，我需要根据 URL 执行一些逻辑，然后调度 Redux 操作。这段代码工作正常，但给了我一个 TypeScript 错误：

React.useEffect(() => 

const  search  = window.location;
const removeFirstQuestionMark = search.slice(1);

if (!removeFirstQuestionMark) 
  return null;


// more logic 

reduxAction(
  foo: 'bar'
);
  return null;
, []);

错误 TS2345：类型参数 '() => null |未定义'不是 可分配给“EffectCallback”类型的参数。输入'空| undefined' 不可分配给类型 'void | (() => 无效 | 不明确的）'。 类型 'null' 不能分配给类型 'void | (() => void | undefined)'。

14 React.useEffect(() =>

【参考方案1】：

useEffect 返回值应该是一个回调，它允许在组件上执行操作并安装

React.useEffect(() => 
  const  search  = window.location;
  const removeFirstQuestionMark = search.slice(1);

  if (!removeFirstQuestionMark) 
    return null; // do not return but you can use if else to avoid next code execution
  

  // more logic

  reduxAction(
    foo: "bar"
  );
  return () => 
    // Things to do on component will unmount
  ;
, []);

【参考方案2】：

在useEffect 中，我们通常会返回一个函数，该函数会在组件卸载时执行一些清理工作。如果你不想做这样的事情，那就不要返回任何东西。

React.useEffect(() => 

const  search  = window.location;
const removeFirstQuestionMark = search.slice(1);

if (!removeFirstQuestionMark) 
  return null;


// more logic 

reduxAction(
  foo: 'bar'
);
//  return null;
, []);