Question

我正在执行一个API调用，该调用从componentDidMount开始，但是当用户加载新组件时，会收到有关潜在内存泄漏的通知，请参阅以下消息。我研究了不同的解决方案，但还没有找到任何可行的解决方案，我想知道是否可以使用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');
        }
      })

Answer 1

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

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

然后用

清除

clearTimeout(this.id)

在componentWillUnmount中

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

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

反应-内存泄漏，ComponentWillUnmount / Axios问题

1 个答案: