setState with Firebase Promise in React

Question

How can i set state inside react component?

I`ve got error message:

Uncaught TypeError: Cannot read property 'setState' of null

here is the component code listing:

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() { ... }

}

Excuse me, @benjamin-gruenbaum , but i meant why i couldnt get data from the firebase, and not about "this" key word — Inessa Pokromkina, Aug 28 '16 at 14:20
Your bug is because of the `this` keyword. I can either close this as incomplete or as a duplicate - for your sake and the sake of future visitors I think it's better to close this as a duplicate. — Benjamin Gruenbaum, Aug 28 '16 at 14:38

James111 · Answer 1 · 2016-08-28T12:04:25.307

15

this is referring to the promise scope. Either use fat arrow functions (es6)

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

Or create a copy of this before the 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
      });
 });

One last option, you could bind this to the promise:

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

edited Aug 28 '16 at 12:04

answered Aug 28 '16 at 11:58

James111

15,378
15
78
121

This is working great. Thank you. – Neela Oct 16 '17 at 10:19
didn't think of creating a copy of 'this' prior to the firebase promise. genius, thanks – John Leonardo Aug 21 '18 at 02:15

score 2 · Answer 2 · answered Aug 28 '16 at 12:14

At, first I want to suggest you that you fetch your initial firebase data in componentDidMount component life cycle and to fix your setState issue you can follow the below code in where I've change the self = this; line only,

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() { ... }

}

setState with Firebase Promise in React

2 Answers2