TypeError：无法读取 null 的属性“setState”

Question

我正在尝试将返回参数从 firebase 传递给状态参数，但我收到了这个错误：

App.js:43 Uncaught TypeError: Cannot read property 'setState' of null

我想将“snapshot”数组传递给“calendars”，然后检索“calendars.summary”或“calendars.date”之类的日历值（我知道该怎么做，但问题是我做不到将快照分配给日历）。

componentDidMount() {
    //setInterval(() => start(this.state.gapi,true), 30000);
    var rootRef = firebase.database().ref();
    var urlRef = rootRef.child("testCalendar/calendars");
urlRef.once("value", function(snapshot) {
  snapshot.forEach(function(child) {
    console.log(child.key+": "+child.child("summary").val());


  });
  this.setState({
      calendars: snapshot
    });
});
    }

我该如何解决？谢谢

更新 在 Mayank Shukla 发表评论后，我可以通过以下方式正确传递“快照”：

componentDidMount() {
    //setInterval(() => start(this.state.gapi,true), 30000);
    var rootRef = firebase.database().ref();
    var urlRef = rootRef.child("testCalendar/calendars");
urlRef.once("value", function(snapshot) {
  snapshot.forEach(function(child) {
    console.log(child.key+": "+child.child("summary").val());

  });
  this.setState({
      calendars: snapshot
    });
}.bind(this));
    }

或

componentDidMount() {
    //setInterval(() => start(this.state.gapi,true), 30000);
    var rootRef = firebase.database().ref();
    var urlRef = rootRef.child("testCalendar/calendars");
urlRef.once("value", (snapshot) => {
  snapshot.forEach(function(child) {
    console.log(child.key+": "+child.child("summary").val());

  });
  this.setState({
      calendars: snapshot
    });
});
    }

但现在我有这个问题：

Uncaught TypeError: this.state.calendars.map is not a function

关于这个功能：

_getCalendarsList(){
     var d = new Date();

    return this.state.calendars.map((calend) => {
    return (
      <Calendar 
      {...calend} 
      key={d.getTime()} />

      )
    });
  }

Answer 1

要在任何变量上使用map，该变量必须是array，您在componentDidMount方法中获取数据，它将在初始渲染后被调用，因此请确保@的初始值987654325@的状态应该是[]，像这样：

constructor(){
   super();
   this.state = {
      calendars: [],
      ....
   }
}

或者在使用map之前打勾，如果不是array那么return null，像这样：

_getCalendarsList(){
    if(!Array.isArray(this.state.calendars))
       return null;

    var d = new Date();

    return this.state.calendars.map((calend) => {
        return (
             <Calendar 
                  {...calend} 
                  key={d.getTime()} 
             />

        )
    });
}