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

Question

仅在未卸载组件的情况下，我试图在设置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;

  };

 }, []);

}

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

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

Answer 2

一个有趣的问题。您可能会发现有关钩子的常见问题解答很有用，因为我认为它相当具体地解决了您的问题。在第一个示例中，卸载的var是组件属性的一部分，而在第二个示例中，它只是作为javascript闭包的一部分而获得的。通常，您要确保将更改的挂载参数作为componentDidUnmount生命周期方法的一部分。我认为，如果您将unmount添加到依赖项列表中，可能会起作用吗？我通常在Clojurescript中使用另一个框架的react，所以我并不完全熟悉主要javascript接口的语义，但这至少是为什么您会收到第一个示例警告的原因。在第一个示例中，如果将最后一部分更改为以下内容，会发生什么？useEffect(() => {  return () => {   unmounted = true;  }; }, [unmounted]);}您可能需要将unmount定义为更正式的react属性，而不仅仅是组件中包含的属性。