添加等待标记以调度后，无法对未安装的组件执行反应 state 更新

Question

我在 redux 调度中添加了一个等待标签，现在我收到此错误：

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 LoginForm (created by ConnectFunction)
    in ConnectFunction (at login.js:12)
    in div (at login.js:11)

有人可以解释为什么会发生这种情况以及我如何 go 关于“清理”我的异步任务？ 我不明白哪个组件没有安装

我的代码：

登录.js：

import React, { Component } from 'react';
import LoginForm from '../components/form/loginForm';
import { connect } from 'react-redux';
import { SUCCESS, HOME } from '../common/webUtils';
import { Redirect } from 'react-router-dom';

class Login extends Component {
  render() {
    if( this.props.loginStatus === SUCCESS ) return <Redirect to = {HOME}/>
    else return (
      <div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}>
        <LoginForm/>
      </div>
    );
  }
}

function mapStateToProps( state ) {
  return {
    loginStatus: state.userReducer.loginStatus
  }
}

export default connect ( mapStateToProps ) ( Login );

导致 loginForm.js 警告的调度代码：

async function handleSubmit() {
    setSubmitted( true )
    if( isValidForm() ) {
      const details = {
          "username": userName,
          "password": password
      }
      await props.login( details )
      if( props.loginStatus !== SUCCESS ) handleShowError()
    } else { 
      handleShowError()
    }
  }

setShowError function 和相应的 state 值初始化：

const [showError, setShowError] = React.useState( false )

const handleShowError = () => {
    setShowError( true )
  };

Answer 1

似乎“异步 function handleSubmit”结果未通知登录我相信这是组件未安装的原因。

一般来说，使用 redux，您需要中间件，例如 thunk 或 saga 来管理后台的服务人员。

仅 Redux 无法完成这项工作。