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

Question

仅当组件尚未卸载时，我才尝试在进行 API 调用后设置属性的状态。在第一个函数中，变量“unmounted”在函数“Component”内初始化；在这种情况下，我收到此警告:“无法对已卸载的组件执行 React 状态更新。这是一个无操作，但它表明您的应用程序中存在内存泄漏。”

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

显示警告:

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;
  };
 }, []);
}

谁能解释一下为什么会发生这种情况？

Answer 1

在您的第一个示例中，每次渲染后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;
    };
  }, []);
}