useEffect中的Redux操作是否影响TypeScript错误？

Question

在页面加载时，我需要根据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”类型的参数。输入'null |undefined'不能分配给'void | （（）=>无效|未定义）”。类型'null'不能分配给类型'void | （（）=> void | undefined）'。

14 React.useEffect（（）=> {

Answer 1

在useEffect内部，我们通常返回一个函数，该函数在卸载组件时会执行一些清理工作。如果您不想执行类似的操作，则不要返回任何内容。

React.useEffect(() => {

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

if (!removeFirstQuestionMark) {
  return null;
}

// more logic 

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

Answer 2

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