null의 속성 'setState'를 읽을 수 없습니다

Question

시작 ReactJS 그리고 Firebase를 데이터베이스로 사용하여 데이터를 수집하려고합니다. 이 오류로 인해 2 일 동안 멈추었습니다. "null의 setState '속성을 읽을 수 없습니다.

Firebase에서 데이터를 읽을 수는 있지만 표시 할 수는 없습니다 ... 무엇을해야할지 모르겠습니다. 수행 this 아직 사용할 수 없기 때문에 당신은 생성자에서 this.setState을 사용할 수 없습니다

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

. 대신, 해당 논리 부분을 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

자바 스크립트 함수에서 this의 값은 호출 방법에 따라 달라집니다. 이와 같이 콜백 함수를 지정할 때 외부 범위는 다른 컨텍스트에서 호출되므로 보존되지 않습니다. 더 자세한 설명은 this article on MDN을 확인하십시오.

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

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

을 또는 당신은 단순히 어휘 범위 지정을 사용하는 화살표 기능을 사용할 수 있습니다 :

명시 적으로 bind를 사용하여 this의 값을 설정할 수 있습니다. 이 경우 기대하는 것 같은이 기본적으로 외부 범위가 보존된다는 것을 의미합니다 :

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

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