时间戳

首页 > 解决方案 > React - 内存泄漏，ComponentWillUnmount / Axios 的问题

reactjs - React - 内存泄漏，ComponentWillUnmount / Axios 的问题

问题描述

我正在执行一个使用 componentDidMount 启动的 API 调用，但是当用户加载一个新组件时，会有一个潜在内存泄漏的通知，请参阅下面的消息。我研究了不同的解决方案，但还没有发现任何可行的方法，我想知道是否可以使用 componentWillUnmount 在此特定组件中修复此问题，或者是否可以在 axios 调用本身中更好地处理。

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。

componentDidMount() {
    this.loadBackground();
    this.getUpdatedWeather();
    this.getNewMartianPhotos();
  }

  checkMartianPhotos = () => {
    if (this.state.martianMotion) {
      console.log('still shooting');
      this.getNewMartianPhotos();
    } else {
      return console.log('done now');
    }
  };

  getNewMartianPhotos = () => {
    let loadedImage = '';
    let loadedInfo = '';
    let loadedMeta = '';
    let totalImage;

    API.getMarsPhotos().then(data => {
      // console.log(data.data);
      // console.log(
      //   data.data.collection.items[this.state.martianCount].data[0].photographer
      // );
      // console.log(
      //   data.data.collection.items[this.state.martianCount].data[0].description
      // );
      // console.log(
      //   data.data.collection.items[this.state.martianCount].links[0].href
      // );

      totalImage = data.data.collection.items.length;
      loadedImage =
        data.data.collection.items[this.state.martianCount].links[0].href;
      loadedInfo =
        data.data.collection.items[this.state.martianCount].data[0].description;
      loadedMeta =
        data.data.collection.items[this.state.martianCount].data[0]
          .photographer;

      this.setState({
        martianImage: loadedImage,
        martianDescription: loadedInfo,
        martianMeta: loadedMeta,
        martianCount: this.state.martianCount + 1
      });

      if (this.state.martianCount < totalImage) {
        console.log(
          `shooting off, image count now ${this.state.martianCount} against ${totalImage}`
        );
        setTimeout(this.checkMartianPhotos, 10000);
      }
    });
  };

  componentWillUnmount() {
    clearTimeout(this.checkMartianPhotos);
  }


-------------------------------------

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

  getMarsPhotos: () =>
    axios
      .get('https://images-api.nasa.gov/search?q=martian', {
        cancelToken: source.token
      })
      .catch(function(thrown) {
        if (axios.isCancel(thrown)) {
          console.log('request canceled', thrown.message);
        } else {
          console.log('there is an error that needs to be handled');
        }
      })

标签： reactjsmemory-leaksaxiossetstate

解决方案

如错误所示，您的组件在卸载后调用 setState。这是因为您错误地清除了超时。您应该执行以下操作以正确清除卸载超时。

this.id = setTimeout(this.checkMartianPhotos, 10000);

然后清除

clearTimeout(this.id)

在组件WillUnmount

此外，尝试将异步逻辑（api 调用）移出组件。

请参阅此内容以了解如何在对已卸载组件进行 API 调用后停止设置状态。

推荐阅读