Get Error 'Cannot read property 'setState' of undefined' on setState line

Question

I keep getting this error for some reason and i dont understand why, the error is

Here is the relevent bit of the code below, i am passing two objects as props into this DashBoard component, one is a firebase user object and the other is a database object that i use to retrieve some data from firebase, I checked and the two objects are imported properly(as shown by the commented console logs), but i keep getting this error and i dont know why?

import React from 'react';


export default class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {dataArray: []};
  }

  async componentDidMount() {
    console.log("i am inside dashboard");
    //console.log(this.props.user);
    //console.log(this.props.database);

    let database = this.props.database;

    const docRef = database.collection("Some_Collection_here").doc("Some_Id_here")
    let dataRetrieved = null;

    docRef.get().then(function(doc) {
      if (doc.exists) {
        const dataRetrieved = doc.data();
        this.setState ({dataArray: dataRetrieved});
      } else {
        console.log("Error: no such document exists");
      }
    })
  }

  render() {
    return (
      <div>

      </div>
    );
  }
}

Answer 1

I get your question. I think this will be ok.

import React from 'react';


export default class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {dataArray: []};
  }

  async componentDidMount() {
    console.log("i am inside dashboard");
    //console.log(this.props.user);
    //console.log(this.props.database);

    let database = this.props.database;

    const docRef = database.collection("Some_Collection_here").doc("Some_Id_here")
    let dataRetrieved = null;

    docRef.get().then(doc => {
      if (doc.exists) {
        const dataRetrieved = doc.data();
        this.setState ({dataArray: dataRetrieved});
      } else {
        console.log("Error: no such document exists");
      }
    })
  }

  render() {
    return (
      <div>

      </div>
    );
  }
}

The reason is:

1. This context
2. Lexical scope