無法讀取null屬性'setState'null

Question

即時啓動ReactJS，我嘗試使用Firebase作爲數據庫來收集我的數據。我從現在的2天卡住了這個錯誤的原因：「無法讀取null的屬性'setState'」

我可以從Firebase讀取我的數據，但我無法顯示它們......我真的不知道該怎麼做這樣做：

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

你不能在構造函數中使用this.setState因爲this還不可用。相反，將該邏輯移動到componentWillMount，它應該開始工作。

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

JavaScript函數中的this的值根據調用方式的不同而不同。當指定這樣的回調函數時，外部範圍將不會被保留，因爲它將從另一個上下文中調用。查看this article on MDN以獲得更深入的解釋。

可以明確使用bind設置this值：

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

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

或者你可以簡單地使用它使用詞彙範圍箭頭功能。這基本上意味着，外部範圍將被保留，你似乎在這種情況下要期待：

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

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