无法读取null的属性'setState'

Question

我启动ReactJS,我尝试使用Firebase作为数据库来收集我的数据.我从2天后就陷入了这个错误的原因:"无法读取属性'setState'的null"

我可以从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

thisJavaScript函数的值取决于它的调用方式.在指定这样的回调函数时,不会保留外部作用域,因为它将从另一个上下文中调用.查看有关MDN的这篇文章,以获得更深入的解释.

您可以this使用bind以下方法显式设置值:

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
  })
});