React 组件销毁后更新state,导致内存泄漏

image

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.

翻译过来意思是:不能在已销毁的组件中更新state,这会导致内存泄漏。

本人在工作中遇到这个上面这个警告,后来仔细查看了代码才发现,确实是我在已销毁的组件后,又在该销毁的组件中更新了state。

逻辑大概是这样的:开新班页面(组件A)有个选择学员的选项,如果用户还没有学员,则点击添加学员按钮,会出现添加学员的对话框(组件B),添加完学员后,关闭(销毁)组件B,然后重新获取学员,在添加学员时,会锁住添加学员按钮(this.setState({isAdding:true})),添加成功后是先关闭了组件B,然后在将(this.setState({isAdding:false})),然后就出现了上面的警告,后来我把this.setState({isAdding:false})这行代码去掉后,果然警告就没有了,而且这行代码根本就没有必要添加,因为组件B已经销毁了,没必要再将isAdding设置为false了

React 组件销毁后更新state,导致内存泄漏_第1张图片

你可能感兴趣的