reactjs - 当我注销时，警告：无法对未安装的组件执行 React 状态更新

Question

注销时出现此错误。

下面的部分是身份验证条件。

错误

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in Query (at auth.js:8)
in Unknown (at App.js:29)

auth.js

import React from "react";
import { Query } from "react-apollo";
import { GET_ACTIVE_ADMIN } from "../queries";
import { Redirect } from "react-router-dom";

const auth = condition => Component => props => (

  <Query query={GET_ACTIVE_ADMIN}>
    {({ data, loading }) => {
      if (loading) return <div>Loading</div>;
      return condition(data) ? <Component {...props} /> : <Redirect to="/" />;
    }}
  </Query>
);

export default auth;

Answer 1

You have to check whether the component is unmounted or not. You can achieve this by two ways:

1. setting this._unmounted flag and check over it.
2. Use useRef(), in your case this will work fine for functional component and Hook.

Code:

function CustomComponent() {

     const isMountedRef = useRef(null);
    
     useEffect(() => {
        isMountedRef.current = true;
        if(isMountedRef.current){
              //  axios call or dispatch events here
         }
    
      return () => isMountedRef.current = false;
      }
    
    return (
        <div> //Return Values /<di>
    }

Alterantively ,You can try with this library: Unmounted