Javascript 警告：Can'；使用auth0登录时，不要对未安装的组件执行React状态更新

我正在跟随一个来自的教程，似乎作者不再支持它了

想法很简单：一旦用户按下登录按钮（在Header.js上），他就会被重定向到auth0页面。在那里，他输入数据并被重定向回localhost:3000/回调路由。这是在触发

handleAuthentication

时发生的

不幸的是，在使用

setSession

功能时设置状态时，我遇到了一个问题

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 the componentWillUnmount method.
    in Auth (created by App)
    in App

以下是组件：

App.js

import React from 'react'
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'
import Auth from './Auth';
import  CallbackPage from "../pages/callback";

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Auth>
          <div style={{width: '1280px', margin: '0 auto'}}>
            <Router>
              <Switch>
                <Route exact path='/' component={HomePage} />
                <Route path='/callback' component={CallbackPage} />
              </Switch>
            </Router>
          </div>
      </Auth>
    )
  }
}

export default App;

从“React”导入React
从“react Router dom”导入{交换机、路由、浏览器路由器作为路由器}
从“/Auth”导入身份验证；
从“./pages/callback”导入CallbackPage；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)

import React，{useffect，useReducer}来自“React”；
进口{
BrowserRouter作为路由器，
链接}
从“反应路由器dom”；
从“../Login”导入登录名；
从“../Logout”导入注销；
从“../Can”导入Can；
从“../../authContext”导入{AuthConsumer}；
常数头=（道具）=>{
返回(
{（{user}）=>(
(
)}
否={（）=>(
)} 
/>
)
}
导出默认标题

和网页：
主页：

import React from 'react';

const HomePage = () => {

  return (
    <div>
      <Header />
    </div>
  )
};

export default HomePage;

从“React”导入React；
const主页=（）=>{
返回(
)
};
导出默认主页；

回拨页

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

import { AuthConsumer } from '../authContext';

const Callback = props => (
  <AuthConsumer>
    {({ handleAuthentication }) => {
      if (/access_token|id_token|error/.test(props.location.hash)) {
        handleAuthentication();
      }
      return <Redirect to='/' />;
    }}
  </AuthConsumer>
);

export default Callback;

从“React”导入React；
从'react router dom'导入{Redirect}；
从“../authContext”导入{AuthConsumer}；
const Callback=props=>(
{（{handleAuthentication}）=>{
if（/access_-token | id_-token | error/.test（props.location.hash））{
手工验证（）；
}
返回；
}}
);
导出默认回调；

任何帮助都将不胜感激

import React from 'react';

const HomePage = () => {

  return (
    <div>
      <Header />
    </div>
  )
};

export default HomePage;

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

import { AuthConsumer } from '../authContext';

const Callback = props => (
  <AuthConsumer>
    {({ handleAuthentication }) => {
      if (/access_token|id_token|error/.test(props.location.hash)) {
        handleAuthentication();
      }
      return <Redirect to='/' />;
    }}
  </AuthConsumer>
);

export default Callback;