React - Eigenschaft 'setState' von null kann nicht gelesen werden

Question

Mir ist bewusst, dass es ähnliche Threads gibt, die das Problem mit dem Geltungsbereich diskutieren.

Unter Verwendung der folgenden Komponente

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Example extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      counter: 0 
     } 
    } 

    addMore() { 
     this.setState({ 
      counter: this.state.counter + 1 
     }); 
    } 

    render() { 
     return (

      <div onClick={ this.addMore }> 
       <p>counter: { this.state.counter }</p> 
      </div> 

     ); 
    } 
} 

if (document.getElementById('example')) { 
    ReactDOM.render(<Example />, document.getElementById('example')); 
} 

Wenn Sie auf die Schaltfläche div Sie erhalten Cannot read property 'setState' of null

Ich bin mir bewusst, Sie Dinge wie this.addMore.bind(this) tun können, aber all dies scheint seltsam zusätzliche Text Stil Code nur zu machen, Arbeit.

---

Was ist der eleganteste Weg, dies zu tun? Wie sicherlich müssen die Menschen einen bevorzugten Weg haben, die ihre Vorteile haben, außer ein Auge wund sein?

Answer 1

Sie müssen den richtigen this-Kontext an die Funktion binden, und Sie können das tun, indem Sie der Konstruktorfunktion this.addMore = this.addMore.bind(this); hinzufügen.

constructor(props) { 
    super(props); 

    this.state = { 
     counter: 0 
    } 

    this.addMore = this.addMore.bind(this); 
} 

Im ES5 React.createClass wurden alle Funktionen automatisch auf die richtige this gebunden, sondern in ES6 Klasse die richtige this Kontext nicht automatisch gebunden. reference

Dies heißt Bind in Constructor und dies ist der Ansatz, der derzeit in den React-Dokumenten für "bessere Leistung in Ihrer Anwendung" empfohlen wird. reference

Answer 2

addMore =() => { 
    this.setState({ 
    counter: this.state.counter + 1 
    }); 
} 

der Pfeil Syntax Pflege der this nimmt verbindlich für Sie

prüfen diese große Link für weitere Informationen, zeigt es viele Möglichkeiten, diese http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html