javascript - 为什么这些功能工作不同？

仅在未卸载组件的情况下，我试图在设置API调用后设置属性的状态。在第一个函数中，变量“ unmount”在函数“ Component”中初始化。在这种情况下，我会收到以下警告：“无法在已卸载的组件上执行React状态更新。这是空操作，但表明您的应用程序中存在内存泄漏。”

在第二个函数中，我全局初始化变量“ unmount”，在这种情况下，我没有收到任何警告。

显示警告：

function Component() {
  const [emailSent, setEmailSent] = useState(false);

  var unmounted = false;
  async function handleClickEvent() {
  try {
   await AuthApi.sendRecoverAccountEmail('123');
   !unmounted && setEmailSent(true);
  } catch (err) {
    !unmounted && setIsSendingEmail(false);
  }
 }

 useEffect(() => {
   return () => {
    unmounted = true;
   };
 }, []);
}

没有警告：

var unmounted = false;
function Component() {
const [emailSent, setEmailSent] = useState(false);

async function handleSendEmail(formValues) {
 try {
  await AuthApi.sendRecoverAccountEmail('123');
  !unmounted && setEmailSent(true);
 } catch (err) {
  !unmounted && setIsSendingEmail(false);
 }
}

useEffect(() => {
  return () => {
   unmounted = true;
  };
 }, []);
}

任何人都可以解释为什么会这样吗？

最佳答案

在第一个示例中，每次渲染后unmounted始终为false。

这是不使用全局实例的正确方法：

function Component() {
  const [emailSent, setEmailSent] = useState(false);
  const unmounted = useRef(false);

  async function handleSendEmail(formValues) {
    try {
      await AuthApi.sendRecoverAccountEmail('123');
      !unmounted.current && setEmailSent(true);
    } catch (err) {
      !unmounted.current && setIsSendingEmail(false);
    }
  }

  useEffect(() => {
    return () => {
      unmounted.current = true;
    };
  }, []);
}