Kann die Eigenschaft 'setState' von null nicht lesen

Question

Ich starte ReactJS und ich versuche Firebase als eine Datenbank zu verwenden, um meine Daten zu sammeln. Ich stecke seit 2 Tagen jetzt Ursache für diesen Fehler: "Kann Eigenschaft 'setState' von null nicht lesen"

Ich kann meine Daten von Firebase lesen, aber ich kann sie nicht anzeigen ... Ich weiß nicht wirklich was zu tun:

import React from 'react'; 
import ProductList from '../Product/ProductList'; 
import Firebase from 'firebase'; 

class HomePage extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     productList: [] 
    } 

    var firebaseRef = new Firebase('https://codehunt-one.firebaseio.com/'); 
    firebaseRef.child("products").on('value', function(snapshot) { 
     var products = snapshot.val(); 
     console.log(products); 

     this.setState({ 
     productList: products 
     }) 
    }); 
    } 

    render() { 
    return (
     <section> 
     <header> 
      <img src="img/banner.jpeg" width="100%" /> 
     </header> 

     <section> 
      <section className="container"> 
       {this.state.productList 
       ? 
       <ProductList productList={this.state.productList}/> 
       : 
       null 
       } 

      </section> 
     </section> 
     </section> 
    ); 
    } 
} 

export default HomePage; 

Answer 1

Sie nicht this.setState im Konstruktor verwenden können, weil this noch nicht verfügbar ist. Bewegen Sie stattdessen dieses Stück Logik zu componentWillMount und es sollte anfangen zu arbeiten.

constructor() { 
    super(); 

    this.state = { 
     productList: [] 
    } 
    } 

    componentWillMount() { 
    var firebaseRef = new Firebase('https://codehunt-one.firebaseio.com/'); 
    firebaseRef.child("products").on('value', function(snapshot) { 
     var products = snapshot.val(); 
     console.log(products); 

     this.setState({ 
     productList: products 
     }) 
    }); 
    } 

Answer 2

Der Wert this in einer JavaScript-Funktion unterscheidet sich je nachdem, wie es hieß. Wenn Sie eine Callback-Funktion wie diese angeben, wird der äußere Bereich nicht beibehalten, da er aus einem anderen Kontext aufgerufen wird. Eine genauere Erläuterung finden Sie unter this article on MDN.

Sie können explizit den Wert von this gesetzt durch bind mit:

firebaseRef.child("products").on('value', function(snapshot) { 
    var products = snapshot.val(); 

    this.setState({ 
    productList: products 
    }) 
}.bind(this)); 

Oder Sie können einfach einen Pfeil Funktion verwenden, die lexikalische Bindung verwendet. Das bedeutet im Wesentlichen, dass der äußere Umfang erhalten bleibt, wie Sie in diesem Fall zu erwarten scheinen:

firebaseRef.child("products").on('value', (snapshot) => { 
    var products = snapshot.val(); 

    this.setState({ 
    productList: products 
    }) 
});