Question

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

版本B：

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）或清除函数，则可以使用该语法。

编辑：如@ 3limin4t0r所述，() => fn()与() => { return fn(); }相同：

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

通过具有函数主体而不显式返回某些内容，您的函数将隐式返回undefined，如果没有要清除的内容，这很好。

Answer 2

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

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

在您的第一个示例中，doRequest返回了undefined以外的内容，当组件卸载时，React会尝试将其作为函数进行“清理”。

具有清理功能的useEffect的示例：

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

useEffect（不带清理功能）的示例。请注意，这很不好，因为在卸载组件之后，侦听器仍会触发。

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

useEffect无法直接调用函数吗？

2 个答案: