zoukankan      html  css  js  c++  java
  • this.IsMounted() is not a function

    I'm trying to build a simple React App. It retrieves data from an ajax call and renders it to the page. The issue I'm having it setting the state of this.props after the ajax call. I'm receiving this error:

    Uncaught TypeError: this.isMounted is not a function

    I've been going through tutorials and looking at some example code, like this page on loading information through ajax on the react site https://facebook.github.io/react/tips/initial-ajax.html, but I don't see what would be causing this error. Here's my code:

    var ANiceReminderApp = React.createClass({
      getInitialState: function(){
        return {
          quotes: []
        };
      },
      componentDidMount: function(){
        $.ajax({
          headers: { 'X-Mashape-Key':'xxxxxx'},
          url: 'https://healthruwords.p.mashape.com/v1/quotes/',
          type: 'GET',
          dataType: 'JSON',
          success: function(data){
            var quote = data[0].media;
            if(this.isMounted()){
              this.setState({
                quotes: quote
              });
            }
          }
        });
      },
    
      render: function() {
        return (
          <div className="container">
            hello world
            <img src={this.state.quotes}/>
            <button>Need more inspiration?</button>
          </div>
    
        );
       }
     });
     React.render(<ANiceReminderApp />, document.body); 

    2 Answers

    @gilly3's answer explains the issue. However, I prefer a different solution: React will efficiently auto-bind class methods, meaning that this will refer properly to the instance. So I generally use methods as callbacks:

    React.createClass({
    
      componentDidMount: function(){
        $.ajax({
          // the method is already bound to the component
          success: this.onDataReceived
        });
      },
    
      onDataReceived: function(data) {
        var quote = data[0].media;
        if(this.isMounted()){
          this.setState({
            quotes: quote
          });
        }
      },
    
      // ...
    
    });

    This has a couple of advantages:

    • In theory at least, React's binding is more efficient than using .bind. This is particularly true if you'd have to call .bind repeatedly for multiple calls.

    • It makes the callback more easily testable on its own.

    • It makes it easier to invoke the callback logic through some other code path (e.g. if you also want to accept data provided via props).

    It's also worth seeing this discussion, which suggests that isMounted may be deprecated in the future - the suggested path in this case is to save a reference to the AJAX request and abort it on componentWillUnmount.

    In event handlers, this refers to the object that raised the event. In your case, that would be the jqXHR object, which indeed lacks the .isMounted() method.

    To deal with this situation you need to either keep a reference to the outer this and use that reference within the event handler, or use function.bind() to force the function to retain the outer context.

    Here is an example of how to do the latter method:

    $.ajax({
        ...
        success: function(data) {
            var quote = data[0].media;
            if (this.isMounted()){
                this.setState({
                    quotes: quote
                });
            }
        }.bind(this);        // Note the use of .bind(this) here
    });

    转载:http://stackoverflow.com/questions/31575516/this-ismounted-is-not-a-function

  • 相关阅读:
    array_map()与array_shift()搭配使用 PK array_column()函数
    Educational Codeforces Round 8 D. Magic Numbers
    hdu 1171 Big Event in HDU
    hdu 2844 poj 1742 Coins
    hdu 3591 The trouble of Xiaoqian
    hdu 2079 选课时间
    hdu 2191 珍惜现在,感恩生活 多重背包入门题
    hdu 5429 Geometric Progression 高精度浮点数(java版本)
    【BZOJ】1002: [FJOI2007]轮状病毒 递推+高精度
    hdu::1002 A + B Problem II
  • 原文地址:https://www.cnblogs.com/wawahaha/p/4908170.html
Copyright © 2011-2022 走看看