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

JavaScript函数中if (mkdir(NDUID_DIR, 0755) < 0) { if(errno != EEXIST) { return ERROR; } }的值因调用方式而异。在指定这样的回调函数时，不会保留外部作用域，因为它将从另一个上下文中调用。请查看this article on MDN以获得更深入的解释。

您可以使用this

明确设置this的值

bind

或者你可以简单地使用一个使用词法范围的箭头函数。这基本上意味着外部作用域将保留，因为在这种情况下您似乎期待：

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

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

Answer 2

您无法在构造函数中使用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
      })
    });
  }

无法读取null

2 个答案: