在 React 中使用 Firebase Promise 的 setState [重复]答案

【问题标题】：setState with Firebase Promise in React [duplicate]在 React 中使用 Firebase Promise 的 setState [重复]
【发布时间】：2017-01-04 14:01:53
【问题描述】：

如何在 React 组件中设置状态？

我收到错误消息：

未捕获的类型错误：无法读取 null 的属性“setState”

这里是组件代码清单：

class MessageList extends React.Component {
 constructor(props){
 super(props);
 this.state = {
   messages: []
 };

 var firebaseRef = firebase.database().ref();
 firebaseRef.once('value')
  .then(function(dataSnapshot) {
      this.setState({
        messages: messages
      });
   });
 }

 render() { ... }

}

【问题讨论】：

对不起，@benjamin-gruenbaum，但我的意思是为什么我无法从 firebase 获取数据，而不是关于“this”关键字
您的错误是因为this 关键字。我可以将其关闭为不完整或重复 - 为了您和未来的访问者，我认为最好将其作为重复关闭。

标签： reactjs firebase promise firebase-realtime-database

【解决方案1】：

首先，我想建议您获取您的初始 firebase 数据在componentDidMount 组件生命周期中并修复您的setState 问题，您可以按照下面的代码，我只更改了self = this; 行，

class MessageList extends React.Component {
 constructor(props){
 super(props);
 this.state = {
   messages: []
 };

componentDidMount() {
 var self = this;
 var firebaseRef = firebase.database().ref();
  firebaseRef.once('value')
  .then(function(dataSnapshot) {
    self.setState({
      messages: messages
    });
  });
 }
}

render() { ... }

}

【讨论】：

【解决方案2】：

this 指的是 promise 范围。要么使用粗箭头函数（es6）

var firebaseRef = firebase.database().ref();
firebaseRef.once('value')
  .then((dataSnapshot) => {
      this.setState({
        messages: messages
      });
   });

或者在promise之前创建一个副本

constructor(props){
 super(props);
 this.state = {
   messages: []
 };
 var that = this; 
 var firebaseRef = firebase.database().ref();
 firebaseRef.once('value')
  .then(function(dataSnapshot) {
      that.setState({
        messages: messages
      });
 });

最后一个选项，您可以将其绑定到承诺：

firebaseRef.once('value')
 .then(function(dataSnapshot) {
     this.setState({
         messages: messages
     });
}).bind(this)

【讨论】：

这很好用。谢谢。
在 firebase 承诺之前没有考虑创建“this”的副本。天才，谢谢