React: Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

Question

I try to setState after a firebase call in componentDidMount:

class Profile extends Component {

constructor(props) {
    super(props)
    this.state = {
        nick: this.props.match.params.user,
        nickid: this.props.match.params.id,
        nickuid: null
    }
}

componentDidMount() {

    firebase.database().ref('/users/').orderByChild('user').equalTo(this.props.match.params.user).once('value').then(function(snapshot) {
      var uid = Object.keys(snapshot.val())[0];
      this.setState({ nickuid: uid }); // error (uid is not null)
      console.log(uid);
    });

}

I get Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined any ideas why?

That's because you're using a `function`, that creates a new `this` context. Your `.then()` function won't have a setState property on it. So there's a few ways to solve this: 1. Use arrow functions. If you use arrow functions (i.e. `.then((snapshot) => {})`, then `this` will be the context of the `componentDidMount` function of a React.Component, which contains the `setState` function. 2. Bind the context of the React lifecycle to your `function`: `.then(function(snapshot) {}.bind(this))` — Alserda, May 06 '20 at 12:36

score 3 · Answer 1 · answered May 06 '20 at 12:33

3

Use arrow function here. You have lost the context when passed function Try:

.then(snapshot => {
   ...

answered May 06 '20 at 12:33

Mark Partola

654
3
10

score 1 · Answer 2 · answered May 06 '20 at 12:34

1

Use arrow function.

.once('value').then((snapshot) => {
      var uid = Object.keys(snapshot.val())[0];
      this.setState({ nickuid: uid });
      console.log(uid);
    });

answered May 06 '20 at 12:34

hackape

18,643
2
29
57

React: Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

2 Answers2