在 componentWillUnmount 方法中取消所有订阅和异步，如何? [英] Cancel All Subscriptions and Asyncs in the componentWillUnmount Method, how?

问题描述

由于异步方法问题，我收到一条错误消息.在我的终端中，我看到:

I'm getting an error message due to an async method issue. In my terminal I'm seeing:

Warning: Can't call setState (or forceUpdate) 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.
- node_modules/fbjs/lib/warning.js:33:20 in printWarning
- node_modules/fbjs/lib/warning.js:57:25 in warning
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:12196:6 in warnAboutUpdateOnUnmounted
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:13273:41 in scheduleWorkImpl
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:6224:19 in enqueueSetState
- node_modules/react/cjs/react.development.js:242:31 in setState
* router/_components/item.js:51:16 in getImage$
- node_modules/regenerator-runtime/runtime.js:62:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:296:30 in invoke
- ... 13 more stack frames from framework internals

我注意到它特别指出了 getImage$

I noticed it's specifically pointing out the getImage$

这是我用于该部分的代码:

Here's the code I'm using for that section:

export default class extends Component {
    constructor(props) {
        super(props);
        const { item } = props

        const bindThese = { item }
        this.boundActionCreators = bindActionCreators(bindThese)

        this.state = {
            image: require('../../static/logo.png'),
            ready: false,
            showOptions: this.props.showOptions
        }

        this.getImage = this.getImage.bind(this)
        this.renderNotAdmin = this.renderNotAdmin.bind(this)
        this.renderAdmin = this.renderAdmin.bind(this)
        this.handleOutOfStock = this.handleOutOfStock.bind(this)
    }

    async getImage(img) {
        let imgUri = await Amplify.Storage.get(img)
        let uri = await CacheManager.get(imgUri).getPath()

        this.setState({
            image: { uri },
            ready: true
        })
    }

    componentDidMount() {
        this.getImage(this.props.item.image)
    }

我正在尝试弄清楚如何通过这种异步方法使用 componentWillUnmount.我该怎么做?

I'm trying to figure out how to use a componentWillUnmount with this async method. How do I go about it?

谢谢！

推荐答案

你可以在这里使用 isMounted React 模式来避免内存泄漏.

You can use isMounted React pattern to avoid memory leaks here.

在你的构造函数中:

constructor(props) {
    super(props);

    this._isMounted = false;
// rest of your code
}

componentDidMount() {
    this._isMounted = true;
    this._isMounted && this.getImage(this.props.item.image);

}

在你的 componentWillUnmount

componentWillUnmount() {
   this._isMounted = false;
}

在你getImage()

async getImage(img) {
    let imgUri = await Amplify.Storage.get(img)
    let uri = await CacheManager.get(imgUri).getPath()

    this._isMounted && this.setState({
        image: { uri },
        ready: true
    })
}

推荐使用基于可取消承诺模式的 Axios 的方法.因此，您可以在使用 cancelToken 订阅 卸载组件的同时取消任何网络调用.这是 Axios 取消

A recommend approach to use Axios which is based cancellable promise pattern. So you can cancel any network call while unmounting the component with it's cancelToken subscription. Here is resource for Axios Cancellation

这篇关于在 componentWillUnmount 方法中取消所有订阅和异步，如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！