Как победить эту ошибку в React?

Question

[xXRustamXx]

В проекте использую react-router и graphqlCMS.

Вот ошибка которая выскакивает в консоли:
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.

Вот код:

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

[xXRustamXx]

Если кто то столкнется с этой проблемой, то эта ошибка из-за ассинхронной функции request(), эта ошибка возникала при быстром переключении навигации, при медленном ошибки не возникает из-за успевание срабатывания функции request(), теперь опишу последовательность:
В компоненте сперва вызывается метод componentDidMount в нем есть ассинхронный request(), после происходит componentWillUnmount() затем происходит исполнение ассинхронного request() в нем вызывается this.setState которого уже нет! т.к компонент размонтирован. Во и все))
Можно решить эту ошибку с помощью переменной в которой хранить - логическое значение формирование компонента:

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;
  }

Comments

[Андрей Иванов]

Не работает твоя схема