Code executes in componentDidMount but not in Other functions

Question

So I've run into an weird issue, maybe I'm doing something wrong here but I haven't had this problem before and my app is full of similar code.

Basically I'm trying to do a simple Firestore get() in a function attached to a button onPress. For some reason the code is not run, or if it is I'm not getting any feedback. If I put the same code in componentDidMount it runs and gives me the database snapshot.

Here are the two bits of code in question.

updated for the current binding I am using

    this.usersRef = firebase.firestore().collection('users');

componentDidMount() {
    this.usersRef
        .get()
        .then((snapshot) => {
            console.log('TEST didMount snapshot', snapshot);
        }).catch((error) => {
            console.log(error)
        });
}


    submitSearch() {
        console.log('submitSearch')
        this.usersRef
            .get()
            .then((snapshot) => {
                console.log('TEST submitSearch snapshot', snapshot);
            }).catch((error) => {
                console.log(error)
            });
}

The submitSearch is called from here

            <Button style={{marginTop: 3, marginBottom: 8}} primary onPress={() => this.submitSearch()}>
                {strings.search}
            </Button>

So I've tried a lot of things here and I can't seem to figure out why the code won't work in the submitSearch function. The only thing I see from that function is the console log saying submit search.

Any ideas would be appreciated! Thanks.

I believe so, Ive tried the bindings a few different ways. If it wasn't bound properly it would throw an error wouldn't it? — rt_, Oct 21 '17 at 06:02
Right so I'm getting no errors, usually when the binding is incorrect I'll see an error related to this.usersRef not being defined or something. — rt_, Oct 21 '17 at 06:09
Ok so scratch that, it appears to be working now. I think it was the binding, I was originally using this.submitSearch = this.submitSearch.bind(this) and calling it with onPress={this.submitSearch} I switched it to just onPress={() this.submitSearch()} and it looks to be working now. But I will test further. — rt_, Oct 21 '17 at 06:10

score 0 · Accepted Answer · answered Oct 21 '17 at 06:15

The issue was the way the function was bound.

I originally had the following in the constructor: this.submitSearch = this.submitSearch.bind(this)

and was calling it in the button component with

onPress={this.submitSearch}

I removed the constructor binding and used just the following in the button component:

onPress={() => this.submitSearch()}

I thought I had done that already! But I can confirm this fixes the issue. It's strange that there are no warnings or errors though, seems like a scenario where they would be helpful instead of just not running the code.

Code executes in componentDidMount but not in Other functions

1 Answers1