Why does "Can't call setState (or forceUpdate) on an unmounted component" error occur in React?

Question

JavaScript

Why, after successful authorization, at the time of the redirect, an error is displayed: take.ms/IiSyE
At the same time, everything works without problems

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';

// Styles //

import './LoginForm.css';

// Components //

import WithLoading from '~/hoc/WithLoading/WithLoading';
import ErrorBox from '~/components/ErrorBox/ErrorBox';

// Actions //

import { logIn } from '../../actions/auth';

const LoadingButton = WithLoading(() => <button className='form__submit button' type='submit'>Войти</button>);

class LoginForm extends Component {
  state = {
    data: {
      email: '[email protected]',
      password: '12345'
    },
    redirectToPrevRoute: false
  }

  onInputChange = ({ target }) => {
    this.setState({
      data: {
        ...this.state.data,
        [target.name]: target.value
      }
    });
  }

  onSubmit = (event) => {
    event.preventDefault();

    if (!this.props.auth.fetching) {
      this.tryLogIn();
    }
  }

  tryLogIn = () => {
    const { logIn } = this.props;

    logIn(this.state.data)
      .then((data) => {
        if (data.status === 'ok') {
          this.setState({ redirectToPrevRoute: true });

          return;
        }

        this.setState({
          data: {
            ...this.state.data,
            password: '',
          },
        });
      });
  }

  render() {
    if (this.state.redirectToPrevRoute) return <Redirect to='/profile' />

    const { email, password } = this.state.data;
    const { error, fetching } = this.props.auth;

    return (
      <form className={`${this.props.className ? this.props.className : ''} form`} onSubmit={this.onSubmit}>
        { error && <ErrorBox errorCode={error} /> }
        <input
          className='form__input'
          type='email'
          name='email'
          onChange={this.onInputChange}
          value={email}
          autoComplete="off"
          placeholder='Email'
        />
        <input
          className='form__input'
          type='password'
          name='password'
          onChange={this.onInputChange}
          value={password}
          placeholder='Пароль'
        />
        <div className="form__footer">
          <LoadingButton isLoading={fetching} />
        </div>
      </form>
    );
  }
};

LoginForm.propTypes = {
  className: PropTypes.string,
  logIn: PropTypes.func.isRequired,
  auth: PropTypes.shape({
    error: PropTypes.string,
    fetching: PropTypes.bool.isRequired,
  }).isRequired,
};

const mapStateToProps = state => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { logIn })(LoginForm);

Answer 1

I found an error: the authorization flag is changing in my Redux store and, because If the current page is private, then the component is "unmounted", and in it, then with an asynchronous setState must work after authorization. As a result, I removed the unnecessary check for this.state.redirectToPrevRoute, because the route is already private and the redirect will happen in any case when the flag in the store changes

Answer 2

Hey Ben! The error text says that you are calling setState on a component that is already "unmounted" (that is, that is no longer on the page). The reason for the error is an extra update. You can solve (the code did not look carefully) either by adding a flag to componentWillUnmount and then checking this flag where the update occurs, or try to get rid of the reason for this update.