React не может выполнить действие с размонтированным компонентом из-за проверки кода состояния

Question

Я пытался настроить перенаправление, если запрос возвращает статус 400 {заказ не найден} или если запрос ничего не возвращает. Однако, как только я добавляю проверку кода состояния, появляется следующая ошибка:

Невозможно выполнить обновление состояния React для отключенного компонента. Это не работает, но указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount. в OrderTracking (создается Context.Consumer)

import React, { Component } from 'react'
import TrackingRender from '../TrackingRender/TrackingRender'


export class OrderTracking extends Component {
    constructor() {
        super()
        this.state = {
            order: []
        }
    }
    async componentDidMount() {
        this._isMounted = true;
        const { id } = this.props.match.params
        const response = await fetch(`http://localhost:5000/api/orders/${id}`)
        const data = await response.json()
        if (!data || response.status == 400) {
            await this.props.history.push('/orders')
        }
        this.setState({
            order: data
        })
        console.log(this.state)
    }
    render() {
        return (
            <div>
                < TrackingRender order={this.state.order} />
            </div>
        )
    }
}

export default OrderTracking

Answer 1

import React, { Component } from 'react';
import TrackingRender from '../TrackingRender/TrackingRender';

export class OrderTracking extends Component {
  constructor() {
    super();
    this.state = {
      order: [],
    };
  }

  componentDidMount() {
    var _this = this;
    this._isMounted = true;
    const { id } = this.props.match.params;

    fetch(`http://localhost:5000/api/orders/${id}`)
      .then((response) => {
        if (response.ok) {
          _this.setState({
            order: data,
          });
        } else {
          if (res.status === 400) {
            this.props.history.push('/orders');
          }
        }
      })
      .then((data) => console.log('data is', data))
      .catch((error) => console.log('error is', error));
  }

  render() {
    return (
      <div>
        <TrackingRender order={this.state.order} />
      </div>
    );
  }
}

export default OrderTracking;

Answer 2

Неважно! Использовал ax ios и перечитал документацию об ошибке. Вот обновленный код, если кто-то заинтересован или имеет такую ​​же ошибку в будущем.

import React, { Component } from 'react'
import TrackingRender from '../TrackingRender/TrackingRender'
import axios from 'axios'
import { Redirect } from 'react-router';


export class OrderTracking extends Component {
    constructor() {
        super()
        this.state = {
            loadingData: true,
            order: []
        }
    }
    async componentDidMount() {
        this._isMounted = true;
        if (this.state.loadingData) {
            try {
                const { id } = this.props.match.params
                const response = await axios.get(`http://localhost:5000/api/orders/${id}`)
                const data = await response.json()
                this.setState({
                    order: data,
                    loadingData: false
                })
                console.log(this.state)
            } catch (err) {
                console.log(err)
            }

        }

    }
    render() {
        if (!this.state.loadingData) {
            return (
                <div>
                    < TrackingRender order={this.state.order} />
                </div>
            )
        } else {
            return (
                <Redirect to='/orders' />
            )
        }

    }
}

export default OrderTracking