反应初始渲染成功与第二次渲染失败？

Question

我有一个与库存Firebase相关联的库存组件。当我的组件第一次渲染时，它完美地工作。但是，当我离开库存页面并返回时，我的组件仅呈现库存数据库中的最后一个项目。这也很奇怪，因为当我包含console.log('add fired ' + product.data.name);时，它识别数据库中的每个节点并记录产品名称，但它们仍未显示在屏幕上。任何帮助将不胜感激。

componentWillMount(){
  //Create reference to inventory db
   this.inventory = firebase.database().ref('inventory');

   this.inventory.on('child_added', snapshot => {
      let product = { data: snapshot.val(), id: snapshot.key };
      console.log('add fired ' + product.data.name);
      this.setState({ products: this.state.products.concat(product) });
  });
}

Answer 1

https://stackoverflow.com/a/40199596/6554834。 在安装发生之前立即调用componentWillMount（）。它在render（）之前调用，因此在此方法中设置状态不会触发重新呈现。避免在此方法中引入任何副作用或订阅。