How to defeat this error in React?

Question

React

In the project I use react-router and graphqlCMS.
Here is the error that pops up in the console:
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.
Here is the code:

import React, { Component } from 'react';
import { request } from 'graphql-request';


const GRAPHCMS_CONNECT = 'https://localhoset:300/API';
const query = `
  {
    blogListses {
      id
      title
      link
      img { url }
    }
  }
`;

export default class Blog extends Component {
  constructor() {
    super();
    this.state = { blogItems: [] };
  }

  componentDidMount() {
    request(GRAPHCMS_CONNECT, query).then(data => {
      this.setState({ blogItems: data.blogListses });
    });
  }

  renderBlogItems() {
    return (
      this.state.blogItems.map( item => {
        return (
          <div className="blog__item" key={ item.id }>
            <div className="blog__item_thumb">
              <img src={ item.img.url } alt={ item.title } />
            </div>
            <div className="blog__item_title">
              <h3>{ item.title }</h3>
            </div>
            <div className="blog__item_permalink">
              <a href={ item.link } target="_blank">Читать</a>
            </div>
          </div>
        )
      })
    );
  }

  render() {
    return (
      <section className="blog">
        <div className="title">
          <h2 data-text="Блог">Блог</h2>
        </div>
        <div className="container">
          <div className="blog__items">{ this.renderBlogItems() }</div>
        </div>
      </section>
    );
  }
}

Answer 1

If someone encounters this problem, then this error is due to the asynchronous request () function, this error occurred when switching navigation quickly, with slow navigation, the error does not occur due to the timing of the request () function, now I will describe the sequence:
In the component, first the componentDidMount method is called, it has an asynchronous request (), after that componentWillUnmount () occurs, then the asynchronous request () is executed, this.setState is called in it, which is no longer there! because the component is unmounted. In and all))
You can solve this error using a variable in which to store - a boolean value of the formation of the component:

constructor() {
    super();

    this.state = { 
      blogItems: []
    };
    this._isMounted = false;
  }

  componentDidMount() {
    this._isMounted = true;

    request(GRAPHCMS_ENDPOINT, query).then(data => {
      if (this._isMounted) {
        this.setState({
          blogItems: data.blogListses
        });
      }
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }