useEffect 无法直接调用 function？

Question

版本A： useEffect(() => doRequest(), []);

版本B：

useEffect(() => {
  doRequest();
}, []);

我一直认为这两个版本完全相同，其中 VersionA 是快捷方式，而 VersionB 允许您在内联 function 中执行多个命令。

但是，当我使用 VersionA 时，我遇到了TypeError: func.apply is not a function ，由 NextJS 抛出

如果我使用 VersionB 的语法，一切正常。 想知道以前是否有人遇到过这种情况？

更新我的组件的完整代码

import { useEffect } from 'react';
import useRequest from '../../hooks/use-request';
import Router from 'next/router';

export default () => {
  const { doRequest } = useRequest({
    url: '/api/users/signout',
    method: 'post',
    body: {},
    onSuccess: () => Router.push('/'),
  });

  useEffect(() => doRequest(), []);
  return <div>Signing you out...</div>;
};

Answer 1

这不完全一样。

useEffect(() => doRequest(), []);

在这种情况下，您的回调将隐式返回doRequest()返回的值。 一个useEffect回调只能返回一个 function （用于清理效果）或undefined 。 如果doRequest不返回任何内容（意思是undefined ）或清理 function，则可以使用该语法。

编辑：正如@3limin4t0r () => fn()所指出的，与() => { return fn(); }相同。 () => { return fn(); } ：

useEffect(() => {
  doRequest();
}, []);

通过拥有 function 主体而不显式返回某些内容，您的 function 会隐式返回undefined ，如果没有什么要清理的，这很好。

Answer 2

这在官方文档中有所描述。

从 useEffect 返回的任何useEffect都用于“清理”。

在您的第一个示例中， doRequest返回undefined以外的其他内容，React 将在组件卸载时尝试将其调用为 function 以“清理”。

使用清理 function 的useEffect示例：

useEffect(() => {
  document.addEventListener("resize", handleResize);
  // This is a "clean up" function
  return () => {
    document.removeEventListener("resize", handleResize);
  };
}, []);

没有清理 function 的useEffect示例。 请注意，这很糟糕，因为在组件卸载后侦听器仍会触发。

useEffect(() => {
  document.addEventListener("resize", handleResize);
}, []);