React tutorial- perché legare questo in una chiamata Ajax

Question

Sto facendo tutorial React ora, e chiedendo il binding in una chiamata Ajax. Perché abbiamo bisogno di legare questo per il successo e l'errore nella chiamata ajax? Apparentemente quando ho rimosso il binding, la funzione genererà un errore. Usiamo il binding perché nella funzione abbiamo this.setState e abbiamo bisogno di un riferimento corretto?

// tutorial13.js 
var CommentBox = React.createClass({ 
    getInitialState: function() { 
    return {data: []}; 
    }, 
    componentDidMount: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    render: function() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
     <CommentList data={this.state.data} /> 
     <CommentForm /> 
     </div> 
    ); 
    } 
}); 

Answer 1

this fa riferimento all'oggetto che ha chiamato la funzione. Il primo argomento di bind è il valore di this. Quindi function(data){...}.bind(an_object) può essere letto come "chiama questa funzione, ma imposta this all'interno della funzione per fare riferimento a an_object". Nel caso dell'esercitazione su React, an_object fa riferimento al componente React. Quindi:

success: function(data) { 
     this.setState({data: data}); 
} 

this si riferisce all'oggetto AJAX. console.log(this) ci dà

Object {url: "comments.json", type: "GET", isLocal: false, global: true, processData: true…} 

---

success: function(data) { 
     this.setState({data: data}); 
}.bind(this) 

this riferisce al componente React. console.log(this) ci dà

ReactCompositeComponent.createClass.Constructor {props: Object, _owner: null, _lifeCycleState: "MOUNTED", _pendingCallbacks: null, _currentElement: ReactElement…} 

Per ulteriori letture, libro di Nicholas Zakas Object Oriented Javascript spiega in dettaglio come funziona bind.

Answer 2

Oh, l'ho capito! Dopo aver usato lo strumento di sviluppo per controllare, il "questo" si riferisce a ReactClass.createClass.Constructor. Quindi la ragione per legare questo nel successo e nell'errore di chiamata ajax è assicurarsi di avere il "giusto" quando chiamiamo this.setState({data:data}); o console.error(this.props.url, status, err.toString());

Se non leghiamo "questo". abbiamo perso il giusto Reagire "questo" e "questo" potrebbe diventare finestra, jQuery o altra cosa in qualsiasi momento. Questo è il motivo per cui abbiamo ricevuto l'errore "Uncaught TypeError: undefined non è una funzione".

Answer 3

La dichiarazione è equivalente a

componentDidMount: function() { 
    var me = this; 

    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(data) { 
     me.setState({data: data}); 
     } 
    }); 
}