React Native - отменить все подписки и асинхронные задачи в методе componentWillUnmount

Question

Поскольку мое приложение извлекает изображения из API и отображает результат, как и ожидалось.Но показ этого предупреждения является неполным для этого проекта, и данные ответы не решают мою проблему.

Кроме того, AbortController не может решить проблему передачи сигнала в качестве параметра при вызове выборки и использовании AbortController.abort() в componentWillUnmount

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.

CODE:

componentDidMount() {
    this.getImage(Flikr_URL);
  }

  getImage(url) {
    fetch(url)
      .then(response => response.json())
      .then(responseJson =>
        this.setState({
          imageData: responseJson.photos.photo,
          loading: false
        })
      )
      .catch(err => {
        console.log(err);
        throw error;
      });
  }

  componentWillUnmount() {
    this.getImage();
  }

Answer 1

Если вы хотите простое решение, это поможет вам. Может быть, будет еще одно хорошее решение, но сейчас вы можете сделать так.

Проверьте, установлен компонент вручную или нет. затем в методе componentDidMount установите флаг componentMounting в true.

  componentDidMount() {
    this.componentMounted = true;
    this.getImage(Flikr_URL);
  }
  getImage(url) {
    fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        if (this.componentMounted) { // check here component is mounted
          this.setState({
            imageData: responseJson.photos.photo,
            loading: false
          });
        }
      })
      .catch(err => {
        console.log(err);
        throw error;
      });
  }

В методе componentWillUnmount установите флаг в значение false

  componentWillUnmount() {
    this.componentMounted = false;
  }