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

【问题标题】：React Initial Render Success vs Second Render Failure?反应初始渲染成功与第二次渲染失败？
【发布时间】：2018-07-20 18:29:12
【问题描述】：

我有一个与库存 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) });
  });
}

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

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

【讨论】：

所以我对 React 非常陌生，我不太确定我是否理解。为什么它最初可以工作，但当我返回页面时却不行？我尝试将它移动到componentDidMount()，但结果相同，它只呈现数据库中的最后一项。
在移动到另一个页面时，您的组件是否从 DOM 中卸载？如果卸载没有发生，那么您实际上是在更新已安装的组件。在这种情况下，将调用componentDidUpdate() 而不是componentWillMount()。也许你应该看看 React 的生命周期方法。 React-Life-Cycle