在componentWillUnmount方法中取消所有订阅和Asyncs,如何? [英] 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 Cancellation 的资源
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方法中取消所有订阅和Asyncs,如何?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!