为什么 ReactjS 与 firebase 数据中的状态不匹配？答案

【问题标题】：Why does the state in ReactjS vs firebase data not match?为什么 ReactjS 与 firebase 数据中的状态不匹配？
【发布时间】：2017-03-09 20:35:07
【问题描述】：

我正在学习通过 reactJS 使用 Firebase。我正在尝试更新我的 firebaseList 状态以匹配 Firebase 数据库。

...
const dbRef = firebase.initializeApp(config).database().ref().child('text');

class App extends Component {
  constructor(){
    super();
    this.state = {
      text: "",
      firebaseList: {}
    }
  }

  componentDidMount(){
    dbRef.on('value', snap => {
      console.log(snap.val());
      this.setState({
        firebaseList: snap.val()
      });
      console.log('firebaseList:  ', this.state.firebaseList);
    });
  }
...

当我在推送一个新字符串"This is a test!" 后进入 chrome 控制台时，会显示：

Object {-KeoiS8luCsuKhzc_Eut: "asdf", -Keol-2Si05dmkmuac8l: "This is a test!"}
firebaseList:   Object {-KeoiS8luCsuKhzc_Eut: "asdf"}

为什么我的firebaseList 状态落后一个元素？为什么snap.val() 有两个键值对，而firebaseList 只有一个键值对？

【问题讨论】：

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

this.setState 不保证同步，因为可以批量处理。这意味着尽管您在代码中在 setState 之后调用了 console.log，但状态实际上可能还没有改变。

来自 React 文档：

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用 this 后访问 this.state 方法可能会返回现有值。没有保证对 setState 的调用和调用的同步操作可能进行批处理以获得性能提升。

如果您想检查您的状态是否已更新，您可以使用回调作为setState 的第二个参数，或者在shouldComponentUpdate(nextProps, nextState) 生命周期方法中添加一些逻辑。

例子：

  componentDidMount(){
    dbRef.on('value', snap => {
      console.log(snap.val());
      this.setState({
        firebaseList: snap.val()
      }, () => console.log('firebaseList:  ', this.state.firebaseList))
    });
  }

或

shouldComponentUpdate(nextProps, nextState) {
  if (this.state.firebaseList !== nextState.firebaseList) {
    console.log('firebaseList:  ', nextState.firebaseList);
  }
}

setState 文档：（注意函数签名，setState(nextState, callback)）

https://facebook.github.io/react/docs/react-component.html#setstate

shouldComponentUpdate 文档：

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

【讨论】：