useEffect TypeScript 错误中的 Redux 操作？

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 | undefined' 不能分配给 'EffectCallback' 类型的参数。 输入'空| undefined' 不能分配给类型 'void | (() => void | undefined)'。 类型 '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; // 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
  };
}, []);

Answer 2

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

React.useEffect(() => {

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

if (!removeFirstQuestionMark) {
  return null;
}

// more logic 

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