编辑:我刚刚意识到警告引用了一个名为TextLayerInternal的组件。这可能就是你的bug所在。其余的内容仍然是相关的，但它可能无法解决您的问题。

1) Getting the instance of a component for this warning is tough. It looks like there is some discussion to improve this in React but there currently is no easy way to do it. The reason it hasn't been built yet, I suspect, is likely because components are expected to be written in such a way that setState after unmount isn't possible no matter what the state of the component is. The problem, as far as the React team is concerned, is always in the Component code and not the Component instance, which is why you get the Component Type name.

这个答案可能不令人满意，但我想我可以解决你的问题。

2) lodash节流功能具有取消方法。在componentWillUnmount调用cancel并丢弃isComponentMounted。取消比引入新属性更“习惯”。

尝试更改setDivSizeThrottleable为

this.setDivSizeThrottleable = throttle(
  () => {
    if (this.isComponentMounted) {
      this.setState({
        pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
      });
    }
  },
  500,
  { leading: false, trailing: true }
);

移除-不能对卸载的组件警告执行React状态更新，在条件下使用componentDidMount方法，并在componentWillUnmount方法上使该条件为假。例如:-

class Home extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      news: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    ajaxVar
      .get('https://domain')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            news: result.data.hits,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}

我有这个警告可能是因为从一个效果钩子调用setState(这将在这3个问题中讨论)。

不管怎样，升级react版本删除了警告。

我知道你没有使用历史记录，但在我的例子中，我使用了React Router DOM中的useHistory钩子，它在状态被持久化到React Context Provider之前卸载了组件。

为了解决这个问题，我使用了钩子withRouter嵌套组件，在我的情况下export default withRouter(Login)，在组件内部const Login = props =>{…;props.history.push(" /仪表盘”);…我还从组件中删除了其他props.history.push，例如，if(authorization.token)返回props.history.push('/dashboard')，因为这会导致循环，因为授权状态。

将新项目推至历史记录的替代方案。

这是一个React挂钩的具体解决方案

错误

警告:无法对未挂载的组件执行React状态更新。

解决方案

您可以在useEffect内部声明let isMounted = true，一旦组件被卸载，它将在清理回调中被更改。在状态更新之前，你现在有条件地检查这个变量:

useEffect(() => {
  let isMounted = true;               // note mutable flag
  someAsyncOperation().then(data => {
    if (isMounted) setState(data);    // add conditional check
  })
  return () => { isMounted = false }; // cleanup toggles value, if unmounted
}, []);                               // adjust dependencies to your needs

const Parent = () => { const [mounted, setMounted] = useState(true); return ( <div> Parent: <button onClick={() => setMounted(!mounted)}> {mounted ? "Unmount" : "Mount"} Child </button> {mounted && <Child />} <p> Unmount Child, while it is still loading. It won't set state later on, so no error is triggered. </p> </div> ); }; const Child = () => { const [state, setState] = useState("loading (4 sec)..."); useEffect(() => { let isMounted = true; fetchData(); return () => { isMounted = false; }; // simulate some Web API fetching function fetchData() { setTimeout(() => { // drop "if (isMounted)" to trigger error again // (take IDE, doesn't work with stack snippet) if (isMounted) setState("data fetched") else console.log("aborted setState on unmounted component") }, 4000); } }, []); return <div>Child: {state}</div>; }; ReactDOM.render(<Parent />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script> <div id="root"></div> <script>var { useReducer, useEffect, useState, useRef } = React</script>

扩展:自定义useAsync钩子

我们可以将所有样板包封装到一个自定义Hook中，当组件卸载或依赖值之前发生更改时，该Hook会自动中止异步函数:

function useAsync(asyncFn, onSuccess) {
  useEffect(() => {
    let isActive = true;
    asyncFn().then(data => {
      if (isActive) onSuccess(data);
    });
    return () => { isActive = false };
  }, [asyncFn, onSuccess]);
}

// custom Hook for automatic abortion on unmount or dependency change // You might add onFailure for promise errors as well. function useAsync(asyncFn, onSuccess) { useEffect(() => { let isActive = true; asyncFn().then(data => { if (isActive) onSuccess(data) else console.log("aborted setState on unmounted component") }); return () => { isActive = false; }; }, [asyncFn, onSuccess]); } const Child = () => { const [state, setState] = useState("loading (4 sec)..."); useAsync(simulateFetchData, setState); return <div>Child: {state}</div>; }; const Parent = () => { const [mounted, setMounted] = useState(true); return ( <div> Parent: <button onClick={() => setMounted(!mounted)}> {mounted ? "Unmount" : "Mount"} Child </button> {mounted && <Child />} <p> Unmount Child, while it is still loading. It won't set state later on, so no error is triggered. </p> </div> ); }; const simulateFetchData = () => new Promise( resolve => setTimeout(() => resolve("data fetched"), 4000)); ReactDOM.render(<Parent />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script> <div id="root"></div> <script>var { useReducer, useEffect, useState, useRef } = React</script>

更多关于效果清理:过度反应:使用效果的完整指南

如果上述解决方案不工作，试试这个，它为我工作:

componentWillUnmount() {
    // fix Warning: Can't perform a React state update on an unmounted component
    this.setState = (state,callback)=>{
        return;
    };
}

我也遇到过类似的问题，并解决了它:

通过在redux上调度一个动作，我自动地让用户登录 (将身份验证令牌置于redux状态)

然后我试图用这个来传达一个信息。设置状态({succ_message:“……”) 在我的分量中。

组件看起来是空的，控制台上出现相同的错误:“卸载组件”..“内存泄漏”等。

在我看完沃尔特在这个帖子里的回答之后

我注意到在我的应用程序的路由表中， 如果用户已登录，我的组件路由无效:

{!this.props.user.token &&
        <div>
            <Route path="/register/:type" exact component={MyComp} />                                             
        </div>
}

无论令牌是否存在，我都使Route可见。

我也有类似的问题，谢谢@ford04帮了我。

但是，出现了另一个错误。

NB。我正在使用ReactJS钩子

ndex.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

错误的原因是什么?

import {useHistory} from 'react-router-dom'

const History = useHistory()
if (true) {
  history.push('/new-route');
}
return (
  <>
    <render component />
  </>
)

这不能工作，因为尽管你重定向到新页面，所有的状态和道具都在dom上被操纵或只是渲染到前一页没有停止。

我找到了什么解决方案

import {Redirect} from 'react-router-dom'

if (true) {
  return <redirect to="/new-route" />
}
return (
  <>
    <render component />
  </>
)

基于@ford04的答案，下面是封装在一个方法中的相同内容:

import React, { FC, useState, useEffect, DependencyList } from 'react';

export function useEffectAsync( effectAsyncFun : ( isMounted: () => boolean ) => unknown, deps?: DependencyList ) {
    useEffect( () => {
        let isMounted = true;
        const _unused = effectAsyncFun( () => isMounted );
        return () => { isMounted = false; };
    }, deps );
} 

用法:

const MyComponent : FC<{}> = (props) => {
    const [ asyncProp , setAsyncProp ] = useState( '' ) ;
    useEffectAsync( async ( isMounted ) =>
    {
        const someAsyncProp = await ... ;
        if ( isMounted() )
             setAsyncProp( someAsyncProp ) ;
    });
    return <div> ... ;
} ;

如果您正在从axios中获取数据，而错误仍然发生，只需将setter包装在条件中

let isRendered = useRef(false);
useEffect(() => {
    isRendered = true;
    axios
        .get("/sample/api")
        .then(res => {
            if (isRendered) {
                setState(res.data);
            }
            return null;
        })
        .catch(err => console.log(err));
    return () => {
        isRendered = false;
    };
}, []);

取决于你如何打开你的网页，你可能不会引起挂载。例如使用<Link/>返回到已经挂载在虚拟DOM中的页面，因此需要componentDidMount生命周期中的数据。

有一个相当常见的钩子，叫做useIsMounted，可以解决这个问题(对于功能组件)…

import { useRef, useEffect } from 'react';

export function useIsMounted() {
  const isMounted = useRef(false);

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

  return isMounted;
}

然后是你的功能组件

function Book() {
  const isMounted = useIsMounted();
  ...

  useEffect(() => {
    asyncOperation().then(data => {
      if (isMounted.current) { setState(data); }
    })
  });
  ...
}

受@ford04接受的答案的启发，我有更好的方法来处理它，而不是在useAsync内部使用useEffect创建一个新函数，返回componentWillUnmount的回调:

function asyncRequest(asyncRequest, onSuccess, onError, onComplete) {
  let isMounted=true
  asyncRequest().then((data => isMounted ? onSuccess(data):null)).catch(onError).finally(onComplete)
  return () => {isMounted=false}
}

...

useEffect(()=>{
        return asyncRequest(()=>someAsyncTask(arg), response=> {
            setSomeState(response)
        },onError, onComplete)
    },[])

受@ford04 answer的启发，我使用了这个钩子，它也接受success, errors, finally和abortFn的回调:

export const useAsync = (
        asyncFn, 
        onSuccess = false, 
        onError = false, 
        onFinally = false, 
        abortFn = false
    ) => {

    useEffect(() => {
        let isMounted = true;
        const run = async () => {
            try{
                let data = await asyncFn()
                if (isMounted && onSuccess) onSuccess(data)
            } catch(error) {
                if (isMounted && onError) onSuccess(error)
            } finally {
                if (isMounted && onFinally) onFinally()
            }
        }
        run()
        return () => {
            if(abortFn) abortFn()
            isMounted = false
        };
    }, [asyncFn, onSuccess])
}

如果asyncFn正在从后端进行某种类型的读取，那么在组件卸载时中止它通常是有意义的(尽管并非总是如此，有时如果ie。你正在加载一些数据到存储中，你可能只是想要完成它，即使组件是unmounted)

isMounted方法在大多数情况下是一种反模式，因为它实际上并不清理/取消任何东西，它只是避免更改未挂载组件的状态，但对挂起的异步任务不做任何操作。React团队最近删除了泄漏警告，因为用户不断创建大量反模式来隐藏警告，而不是修复其原因。

但是用纯JS编写可取消的代码确实很棘手。为了解决这个问题，我用自定义钩子制作了自己的库useAsyncEffect2，构建在一个可取消的承诺(c-promise2)之上，用于执行可取消的异步代码以达到其优雅的取消。所有异步阶段(承诺)，包括深层的，都是可以取消的。这意味着如果其父上下文被取消，这里的请求将自动中止。当然，可以使用任何其他异步操作来代替请求。

useAsyncEffect演示与普通useState使用(现场演示):

    import React, { useState } from "react";
    import { useAsyncEffect } from "use-async-effect2";
    import cpAxios from "cp-axios";
    
    function TestComponent({url}) {
      const [text, setText] = useState("");
    
      const cancel = useAsyncEffect(
        function* () {
          setText("fetching...");
          const json = (yield cpAxios(url)).data;
          setText(`Success: ${JSON.stringify(json)}`);
        },
        [url]
      );
    
      return (
        <div>
          <div>{text}</div>
          <button onClick={cancel}>
            Cancel request
          </button>
        </div>
      );
    }

useAsyncEffect演示与内部状态使用(现场演示):

    import React from "react";
    import { useAsyncEffect } from "use-async-effect2";
    import cpAxios from "cp-axios";
    
    function TestComponent({ url, timeout }) {
      const [cancel, done, result, err] = useAsyncEffect(
        function* () {
          return (yield cpAxios(url).timeout(timeout)).data;
        },
        { states: true, deps: [url] }
      );
    
      return (
        <div>
          {done ? (err ? err.toString() : JSON.stringify(result)) : "loading..."}
          <button onClick={cancel} disabled={done}>
            Cancel async effect (abort request)
          </button>
        </div>
      );
    }

使用装饰器的类组件(现场演示)

import React, { Component } from "react";
import { ReactComponent } from "c-promise2";
import cpAxios from "cp-axios";

@ReactComponent
class TestComponent extends Component {
  state = {
    text: ""
  };

  *componentDidMount(scope) {
    const { url, timeout } = this.props;
    const response = yield cpAxios(url).timeout(timeout);
    this.setState({ text: JSON.stringify(response.data, null, 2) });
  }

  render() {
    return (<div>{this.state.text}</div>);
  }
}

export default TestComponent;

更多其他例子:

Axios请求的错误处理 用坐标获取天气 Live搜索 暂停和继续 进步捕获

const handleClick = async (item: NavheadersType, index: number) => {
    const newNavHeaders = [...navheaders];
    if (item.url) {
      await router.push(item.url);   =>>>> line causing error (causing route to happen)
      // router.push(item.url);  =>>> coreect line
      newNavHeaders.forEach((item) => (item.active = false));
      newNavHeaders[index].active = true;
      setnavheaders([...newNavHeaders]);
    }
  };

来自@ford04的解决方案对我来说不起作用，特别是如果你需要在多个地方使用isMounted(多个useEffect)，建议使用useRef，如下所示:

基本包

"dependencies": 
{
  "react": "17.0.1",
}
"devDependencies": { 
  "typescript": "4.1.5",
}

我的钩子组件

export const SubscriptionsView: React.FC = () => {
  const [data, setData] = useState<Subscription[]>();
  const isMounted = React.useRef(true);

  React.useEffect(() => {
    if (isMounted.current) {
      // fetch data
      // setData (fetch result)

      return () => {
        isMounted.current = false;
      };
    }
  }
});

下面是最简单和最紧凑的解决方案(带有解释)，它是一行程序解决方案。

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

上面的useEffect()示例返回一个回调函数，触发React在更新状态之前完成其生命周期的卸载部分。

这个非常简单的解决方案就是我们所需要的。此外，它的工作方式也不同于@ford04和@ sfleletche提供的虚构语法。顺便说一下，下面来自@ford04的代码片段是纯虚构语法(@ sflletche、@vinod、@guneetgstar和@Drew Cordano使用了完全相同的虚构语法)。

data =>{<——虚构/虚构语法

someAsyncOperation().then(data => {
    if (isMounted) setState(data);    // add conditional check
  })

我所有的linter和我整个团队的所有linter都不会接受它，他们报告Uncaught SyntaxError: unexpected令牌:'=>'。我感到惊讶的是，竟然没有人知道这个虚构的语法。有谁参与了这个问题的讨论，特别是那些支持他们的人，能不能向我解释一下他们是如何找到对他们有用的解决方案的?

更新不要使用我原来的答案，因为它不起作用

这个答案是基于可取消承诺的使用和makeccancable中的一个注释，我迁移到使用钩子。然而，它似乎不能取消async/await链，甚至cancel -promise也不支持取消await链

对此做了更多的研究，似乎是一些内部的谷歌原因阻止了可取消承诺进入标准。

此外，“蓝鸟”有一些承诺，引入了可取消的承诺，但它在世博会上不起作用，至少我还没有看到它在世博会上起作用的例子。

公认的答案是最好的。因为我使用TypeScript，我已经适应了一些修改的代码(我显式设置依赖，因为接受的答案的隐式依赖似乎在我的应用程序上重新呈现循环，添加并使用async/await而不是承诺链，传递一个引用到挂载对象，以便async/await链可以在需要时提前取消)

/**
 * This starts an async function and executes another function that performs
 * React state changes if the component is still mounted after the async
 * operation completes
 * @template T
 * @param {(mountedRef: React.MutableRefObject<boolean>) => Promise<T>} asyncFunction async function,
 *   it has a copy of the mounted ref so an await chain can be canceled earlier.
 * @param {(asyncResult: T) => void} onSuccess this gets executed after async
 *   function is resolved and the component is still mounted
 * @param {import("react").DependencyList} deps
 */
export function useAsyncSetEffect(asyncFunction, onSuccess, deps) {
  const mountedRef = useRef(false);
  useEffect(() => {
    mountedRef.current = true;
    (async () => {
      const x = await asyncFunction(mountedRef);
      if (mountedRef.current) {
        onSuccess(x);
      }
    })();
    return () => {
      mountedRef.current = false;
    };
  }, deps);
}

原来的答案

由于我有许多不同的异步操作，所以我使用cancelable-promise包以最小的代码更改来解决这个问题。

以前的代码:

useEffect(() => 
  (async () => {
    const bar = await fooAsync();
    setSomeState(bar);
  })(),
  []
);

新代码:

import { cancelable } from "cancelable-promise";

...

useEffect(
  () => {
    const cancelablePromise = cancelable(async () => {
      const bar = await fooAsync();
      setSomeState(bar);
    })
    return () => cancelablePromise.cancel();
  },
  []
);

你也可以像这样在一个自定义实用函数中编写它

/**
 * This wraps an async function in a cancelable promise
 * @param {() => PromiseLike<void>} asyncFunction
 * @param {React.DependencyList} deps
 */
export function useCancelableEffect(asyncFunction, deps) {
  useEffect(() => {
    const cancelablePromise = cancelable(asyncFunction());
    return () => cancelablePromise.cancel();
  }, deps);
}

这里有一个简单的解决方案。这个警告是由于当我们在后台执行一些取回请求时(因为一些请求需要一些时间)，我们从那个屏幕导航回来，然后他们的反应不能更新状态。下面是示例代码。在每次状态更新之前写这一行。

if(!isScreenMounted.current) return;

这里是完整的代码

import React , {useRef} from 'react'
import { Text,StatusBar,SafeAreaView,ScrollView, StyleSheet } from 'react-native'
import BASEURL from '../constants/BaseURL';
const SearchScreen = () => {
    const isScreenMounted = useRef(true)
    useEffect(() => {
        return () =>  isScreenMounted.current = false
    },[])

    const ConvertFileSubmit = () => {
        if(!isScreenMounted.current) return;
         setUpLoading(true)
 
         var formdata = new FormData();
         var file = {
             uri: `file://${route.params.selectedfiles[0].uri}`,
             type:`${route.params.selectedfiles[0].minetype}`,
             name:`${route.params.selectedfiles[0].displayname}`,
         };
         
         formdata.append("file",file);
         
         fetch(`${BASEURL}/UploadFile`, {
             method: 'POST',
             body: formdata,
             redirect: 'manual'
         }).then(response => response.json())
         .then(result => {
             if(!isScreenMounted.current) return;
             setUpLoading(false)    
         }).catch(error => {
             console.log('error', error)
         });
     }

    return(
    <>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
            <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
               <Text>Search Screen</Text>
            </ScrollView>
        </SafeAreaView>
    </>
    )
}

export default SearchScreen;


const styles = StyleSheet.create({
    scrollView: {
        backgroundColor:"red",
    },
    container:{
        flex:1,
        justifyContent:"center",
        alignItems:"center"
    }
})

我通过提供useEffect钩子中使用的所有参数来解决这个问题

代码报告了该错误:

useEffect(() => {
    getDistrict({
      geonameid: countryId,
      subdistrict: level,
    }).then((res) => {
      ......
    });
  }, [countryId]);

修复后的代码:

useEffect(() => {
    getDistrict({
      geonameid: countryId,
      subdistrict: level,
    }).then((res) => {
      ......
    });
  }, [countryId,level]);

可以看到，问题解决后，我提供了所有的参数(包括水平参数)，应该通过。

为jsx组件添加一个引用，然后检查它是否存在

function Book() {
  const ref = useRef();

  useEffect(() => {
    asyncOperation().then(data => {
      if (ref.current) setState(data);
    })
  });

  return <div ref={ref}>content</div>
}

根据React文档，检查组件是否被挂载实际上是一个反模式。setState警告的解决方案是利用AbortController的使用:

useEffect(() => {
  const abortController = new AbortController()   // creating an AbortController
  fetch(url, { signal: abortController.signal })  // passing the signal to the query
    .then(data => {
      setState(data)                              // if everything went well, set the state
    })
    .catch(error => {
      if (error.name === 'AbortError') return     // if the query has been aborted, do nothing
      throw error
    })
  
  return () => {
    abortController.abort()                       // stop the query by aborting on the AbortController on unmount
  }
}, [])

对于不基于Fetch API的异步操作，仍然应该有一种方法来取消这些异步操作，您应该利用这些操作，而不仅仅是检查组件是否被挂载。如果您正在构建自己的API，您可以在其中实现AbortController API来处理它。

更详细地说，检查组件是否被挂载是一个反模式，因为React在内部检查组件是否被挂载以显示警告。再次执行相同的检查只是隐藏警告的一种方法，还有一些更简单的方法来隐藏警告，而不是将这段代码添加到代码库的大部分中。

来源:https://medium.com/doctolib/react-stop-checking-if-your-component-is-mounted-3bb2568a4934

React已经删除了这个警告 但这里有一个更好的解决方案(不仅仅是变通)

useEffect(() => {
  const abortController = new AbortController()   // creating an AbortController
  fetch(url, { signal: abortController.signal })  // passing the signal to the query
    .then(data => {
      setState(data)                              // if everything went well, set the state
    })
    .catch(error => {
      if (error.name === 'AbortError') return     // if the query has been aborted, do nothing
      throw error
    })
  
  return () => {
    abortController.abort() 
  }
}, [])

对于这个错误，我有两个解决方案:

返回:

如果你使用了钩子和useEffect，那么使用一个useEffect的返回结束。

useEffect(() => {
    window.addEventListener('mousemove', logMouseMove)
    return () => {
        window.removeEventListener('mousemove', logMouseMove)
    }
}, [])

componentWillUnmount:

如果你使用componentDidMount，那么把componentWillUnmount放在它旁边。

componentDidMount() { 
    window.addEventListener('mousemove', this.logMouseMove)
}

componentWillUnmount() {
    window.removeEventListener('mousemove', this.logMouseMove)
}

在我的例子中，问题是父组件隐藏了子组件，因为子组件中的条件发生了变化。

我所做的就是改变条件，让子组件总是显示出来。

发生了什么事:

const ParentComponent:FC = () => {
  ...
  if (someCondition) {
    return null;
  }

  return (
   <>
     Some cool text here
    
     <ChildModalComponent message="this is a cool modal" />
   </>
  )
}



const ChildModalComponent: FC = () => {
  ...
  const handleSubmit = () => {
    setSomeCondition(true);
  }
}

因此，在点击提交后，由于父条件(someCondition)，模式被自动隐藏。

我是怎么解决的?

我改变了父组件中someCondition检查的位置，所以子组件总是显示:

const ParentComponent:FC = () => {
  ...
  return (
   <>
     {!someCondition && <>Some cool text here</>
    
     <ChildModalComponent message="this is a cool modal" />
   </>
  )
}

我面对的是同样的警告，不是固定的。为了解决这个问题，我删除了useEffect()中的useRef()变量检查 之前，代码是

const varRef = useRef();
useEffect(() => {
    if (!varRef.current)
    {
    }
}, []);

现在，代码是

const varRef = useRef();   
useEffect(() => {
    //if (!varRef.current)
    {
    }
}, [])

希望有帮助……

在我的类似登录的屏幕的例子中，获取是在父组件的onClick处理程序中完成的，父组件将该处理程序传递给子组件，子组件将.catch和.finally放在它上面。

在.then情况下，重定向(因此卸载)将作为正常操作发生，只有在获取错误的情况下，子进程才会挂载在屏幕上。

我的解决方案是将setState和所有其他代码从.finally移到.catch，因为子对象肯定会挂载在.catch case中。在.then情况下，由于保证了卸载，所以不需要做任何事情。