React Native: Using "setState" within Promise

Question

I'm trying to update the state of a React Component, based on data retrieved through an API. However, I am unable to use the setState function from within the promise, as React Native always returns the following error "Type Error: _this2.setState is not a function". Here is how I am trying to achieve the following:

let foodList = [];
        Firebase.auth().onAuthStateChanged(function(user) {
            if (user) {
                Firebase
                    .firestore()
                    .collection(`/userProfiles/${user.uid}/foodList`)
                    .get()
                    .then(foodListSnapshot => {
                        foodListSnapshot.forEach(snap => {
                            foodList.push({
                                foodName: snap.data().name,
                                mealConsumed: snap.data().meal,
                                estimatedCalories: snap.data().calories,
                                dateConsumed: snap.data().date
                            });
                        });
                    }).then((foodList) => {
                        this.setState({data: foodList});
                    }).catch(error => console.log(error));
            } else {
                Alert.alert('User not signed in');
            }
        });

My goal is to have the component re-render, once the state's data field has been updated.

I have tried also using bind.this however as I'm quite new to React Native, I have been unsuccessful in figuring it out so far. If someone could help me out with this, I would be extremely appreciative! :)

Try to change to this: `onAuthStateChanged((user) => {`. This way the function will bind outer scope. — ischenkodv, Sep 25 '19 at 06:06
@ischenkodv - You're seriously amazing! I've been struggling with this one issue for the past few hours, thank you so very much! I don't suppose you could explain why exactly this solution worked, when manually binding the API calls didn't? — Vilitaria, Sep 25 '19 at 06:29
@Vilitaria The function `function() {}` doesn't bind outer scope while `() => {}` binds it. That's the difference. — ischenkodv, Sep 25 '19 at 07:04

score 0 · Answer 1 · answered Sep 25 '19 at 07:07

You need to change function(user) to (user) => {}, because function() does not bind the outer scope(state). So it would look something like this:

let foodList = [];
        Firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                Firebase
                    .firestore()
                    .collection(`/userProfiles/${user.uid}/foodList`)
                    .get()
                    .then(foodListSnapshot => {
                        foodListSnapshot.forEach(snap => {
                            foodList.push({
                                foodName: snap.data().name,
                                mealConsumed: snap.data().meal,
                                estimatedCalories: snap.data().calories,
                                dateConsumed: snap.data().date
                            });
                        });
                    }).then((foodList) => {
                        this.setState({data: foodList});
                    }).catch(error => console.log(error));
            } else {
                Alert.alert('User not signed in');
            }
        });

That will make state available inside of that function.

React Native: Using "setState" within Promise

1 Answers1