React学习笔记-this.isMounted() is not a func

React学习笔记-this.isMounted() is not a func

今天在https://zhuanlan.zhihu.com/p/21483570看了一篇React编码风格的博文,在最后一条看到了

isMounted

这与我在React中文文档的看到的介绍生命周期时,值得注意的是当执行异步请求的响应时,在更新 state 前,一定要先通过 this.isMounted() 来检测组件的状态是否还是 mounted。但是React的ES6写法中已经废除了isMounted。

以下是我上网查找的解决办法:

大概是这样的代码

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  1. $.ajax({  
  2.     ...  
  3.     success: function(data) {  
  4.         var quote = data[0].media;  
  5.         if (this.isMounted()){  
  6.             this.setState({  
  7.                 quotes: quote  
  8.             });  
  9.         }  
  10.     }  
  11. });  

 然后浏览器报了这样一个错


 this.isMounted() is not a function


随即去翻了React官网的API,原来 isMounted() 这个方法被React废弃掉了,so 不能用这个函数了


然后官网给了一个案例

大概是这个样子的

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  1. componentDidMount: function() {  
  2.     this.serverRequest = $.get(this.props.source, function (result) {  
  3.       var lastGist = result[0];  
  4.       this.setState({  
  5.         username: lastGist.owner.login,  
  6.         lastGistUrl: lastGist.html_url  
  7.       });  
  8.     }.bind(this));  
  9.   },  
  10.   
  11.   componentWillUnmount: function() {  
  12.     this.serverRequest.abort();  
  13.   }  


官网是这么解释的

When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted.


当异步加载数据的时候, 使用 componentWillUnmount 来取消任何未完成的请求 在组件卸载之前


 componentWillUnmount()

在组件从 DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素

所以我们可以用这个方法替代 isMounted() 来确保该组件是否还是mounted。

还可以自己定义

componentDidMount() {    

this.mounted = true;

}

componentWillUnmount() {    

this.mounted = false;

}




回复列表



回复操作






发布时间:2016-08-19 16:31:27

修改时间:2016-12-25 21:30:57

查看次数:1634

评论次数:3

TA的文章总数

37