javascript - 当 firebase 更新时，React 组件不会更新

Question

我已经为我的智能家居仪表板设置了一个人员跟踪器(内置于 React 和 Firebase 中)。但是，当 firebase 数据库发生变化时，它不会导致 react 组件重绘。我不知道哪里出了问题，有人可以帮我吗？

import React from 'react';
import * as firebase from 'firebase';
import moment from 'moment';

export default class IO extends React.Component {
  constructor() {
    super();
    this.state = {
      people: []
    };
  }

  componentDidMount() {
    let peopleArray = []
    this.dbroot = firebase.database().ref().child('io')
    this.dbroot.on('value', snapshot => {
      snapshot.forEach((snap) => {
        if(snap.val().active === true) {
          peopleArray.push(snap.val())
        }
      })
      this.setState({people: peopleArray})
    });
  }

  render() {
    return(
      <section class="c-module c-module_IO">
        <ul>
          {
            this.state.people.map((p) => {
              return <li key={ p.name } class={'status--'+p.status}><img src={p.image} alt={ p.name } /></li>
            })
          }
        </ul>
      </section>
    )
  }
}

Answer 1

当您的组件首次挂载时，它会调用 ComponentDidMount 并初始化 peopleArray。这只会执行一次，因此每次您从 Firebase 收到更新时，这个数组都会发生变化。在您当前的实现中，您正在改变状态，因为对 peopleArray 的引用作为指针而不是按值保存在状态中。 React 在检查状态树中是否发生变化时不会进行深度比较，它会进行对象比较。这就是为什么你永远不想改变你的状态，总是在设置状态时创建新对象。这也适用于 redux。

一个 super 快速的修复方法是将 let peopleArray = [] 行移动到 firebase onValue 处理程序中，这样每次更新时都会创建一个新数组。此外，在当前的实现中，您将继续将 Firebase 值附加到同一个数组中，因此您可能会得到重复项。我提到的修复也会解决这个问题。

这是您的最终 CDM:

componentDidMount() {
  this.dbroot = firebase.database().ref().child('io')
  this.dbroot.on('value', snapshot => {
    let peopleArray = []
    snapshot.forEach((snap) => {
      if(snap.val().active === true) {
        peopleArray.push(snap.val())
      }
    })
    this.setState({people: peopleArray})
  });
}