为什么这个“无法更新未安装的组件”修复工作？答案

【问题标题】：Why does this "cannot update unmounted component" fix work?为什么这个“无法更新未安装的组件”修复工作？
【发布时间】：2021-08-25 21:52:37
【问题描述】：

在我使用 TypeScript 和 React 编写的许多页面上，我不断收到 警告：无法对未安装的组件执行 React 状态更新消息。我看到许多论坛提供了一个解决方案，其中包括设置一个名为 _isMounted 的状态变量，并在运行任何初始化函数之前将其设置为 true。我已经这样做了并且不断收到错误，但经过一些实验后发现了一个可行的解决方案，虽然我不知道为什么它有效。

这是我的第一个方法。使用此代码仍会显示警告消息

const [_isMounted, set_isMounted] = useState<boolean>(false);

useEffect((): () => void => {
    window.addEventListener('resize', updateWindowDimensions);
    updateWindowDimensions();
    set_isMounted(true);

    return (): void => {
        window.removeEventListener('resize', updateWindowDimensions);
    }
}, []);

useEffect((): void => {
    if (_isMounted === true) {
        function1();
        function2();
        function3();
        function4();
        function5();
    }
}, [_isMounted]);

通过将_isMounted初始化为未定义，将其设置为false，然后将其设置为true来更改它似乎已经解决了问题

const [_isMounted, set_isMounted] = useState<boolean>();

useEffect((): () => void => {
    window.addEventListener('resize', updateWindowDimensions);
    updateWindowDimensions();
    set_isMounted(false);

    return (): void => {
        window.removeEventListener('resize', updateWindowDimensions);
    }
}, []);

useEffect((): void => {
    if (_isMounted === false) {
        set_isMounted(true);
    }
}, [_isMounted]);

useEffect((): void => {
    if (_isMounted === true) {
        function1();
        function2();
        function3();
        function4();
        function5();
    }
}, [_isMounted]);

为什么第一种方法不能解决问题而第二种方法成功了？

【问题讨论】：

标签： reactjs typescript react-tsx

【解决方案1】：

好吧，老实说，我不确定第二种方法是否真的解决了问题。您仍然使用_isMounted 作为状态来检查组件是mounted 还是dismounted。但在我看来，你需要使用 ref 之类的东西。

看看这个one。向下滚动可以找到与此类似的功能组件的答案。

   const _isMounted= useRef(false)

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

我认为由于细微的时差，第二个没有显示错误。 _isMounted 稍后更新，这不小心阻止了function1-function6。

【讨论】：

我怀疑即使警告消息消失了，我的方法实际上并没有解决问题，或者即使是这样，也有更好的方法来处理它。感谢您的回答和链接

【解决方案2】：

经过一些额外的挖掘，我发现了 useIsMounted 钩子，它看起来比我使用的方法要好得多 here

【讨论】：