useEffect不能直接调用函数吗？

Question

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

VersionB：

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

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

然而，当我使用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回调只能返回一个函数(用于清除效果)或undefined。如果doRequest不返回任何内容(意思是undefined)或清除函数，则可以使用该语法。

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

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

通过拥有一个函数体而不显式地返回某些内容，您的函数隐式地返回undefined，如果没有任何需要清理的东西，这是很好的。

Answer 2

这是在官方文档这里中写的。

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

在您的第一个示例中，doRequest返回undefined以外的其他内容，当组件卸载时，它将试图作为一个函数调用“清理”。

带有清理函数的useEffect示例：

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

没有清理函数的useEffect示例。注意，这是不好的，因为侦听器仍然会在组件卸载后触发。

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