如何从React Native的componentDidMount内部的函数访问this.state？

Question

this.state is undefined when I try to use it inside a function within componentDidMount . this is referring to the component within componentDidMount , but not when it is called from the nested function. I have tried binding this to to the function but have not had any luck. I am using React Native, but I believe this applies to React in general. Here is componentDidMount :

componentDidMount(){
    console.log(this.state); //is state of the Component
    //this.state.foos is an array
    var foosRef = firebase.database().ref('foos');
    foosRef.on('child_added', function(child){
      console.log(this.state); //is undefined
      this.setState((prevState) => {
        return {foos: prevState.push(child) }
      })

    }).bind(this)

  }

I currently have the following in my constructor:

this.componentDidMount.bind(this);

I also tried binding this at the end of the callback, instead of after .on but that does not work either.

The error is:

TypeError: prevState.push is not a function. (In 'prevState.push(child)', prevState.push is undefined)

state is not a property of this .

I know you shouldn't mutate prevState , but I was previously doing

this.state.foos.push(child)

and haven't looked up the syntax for adding an element as a copy of the original.

Answer 1

the problem is the context of 'this' within your handler function is not your component's definition. You can solve this in one of three ways:

1. before calling foosRef.on, add

    let my = this; 

then reference "my" inside your inline handler function instead of "this".

OR, 2. move your inline handler function to a standalone member of your component class, eg:

function foosRefOnHandler(child){
  console.log(this.state); //is undefined
  this.setState((prevState) => {
    return {foos: prevState.push(child) }
  }

then, you would have to change your foosRef.on call to bind that method:

foosRef.on('child_added', this.foosRefOnHandler.bind(this));

OR, 3. using an inline arrow function instead of handler, eg:

foosRef.on('child_added', (child) => {
  console.log(this.state); //is undefined
  this.setState((prevState) => {
    return {foos: prevState.push(child) }
  })

})