反应本地导航不承诺后呈现

Question

On React Native, I'm using a Promise for the Navigator component on the RightButton function so that I can return a certain icon depending on whether a value in AsyncStorage returns true or false. However the navigator always returns the next case in my switch case, as if it won't wait for my code to finish executing. Is there anything wrong with this implementation, or another way to check AsyncStorage before rendering out my Navigator RightButton.

    switch(route.id) {
        case('businessProfile'):

            var _this = this;
            var p = new Promise(function(resolve, reject) {

                if (_this.checkBusinessFavourited()) {
                    resolve(true);
                } else {
                    resolve(false);
                }

            })
                .then(function(isFavourited) { 
                    if (isFavourited) {
                        return (
                            <View style={[ styles.multipleIcons ]}>
                                <TouchableOpacity
                                    onPress={() => {
                                        this.setBusinessAsFavourite(route.business.id)
                                    }}
                                    style={[ styles.navBarButton, styles.iconRightPaddingLarge ]}
                                    >
                                    <IconFA
                                        name='heart'
                                        size={ 25 }
                                        color='#de6262'
                                        style={ styles.icon }
                                    />
                                </TouchableOpacity>

                                <TouchableOpacity
                                    onPress={() => this.showShareActionSheet()}
                                    style={ styles.navBarButton }
                                    >
                                    <IconIon
                                        name='ios-upload-outline'
                                        size={ 25 }
                                        color='#696d6f'
                                        style={ styles.icon }
                                    />
                                </TouchableOpacity>
                            </View>
                        );

                    } else {

                        return (
                            <View style={[ styles.multipleIcons ]}>
                                <TouchableOpacity
                                    onPress={() => {
                                        this.setBusinessAsFavourite(route.business.id)
                                    }}
                                    style={[ styles.navBarButton, styles.iconRightPaddingLarge ]}
                                    >
                                    <IconFA
                                        name='heart'
                                        size={ 25 }
                                        color='#ddd'
                                        style={ styles.icon }
                                    />
                                </TouchableOpacity>

                                <TouchableOpacity
                                    onPress={() => this.showShareActionSheet()}
                                    style={ styles.navBarButton }
                                    >
                                    <IconIon
                                        name='ios-upload-outline'
                                        size={ 25 }
                                        color='#696d6f'
                                        style={ styles.icon }
                                    />
                                </TouchableOpacity>
                            </View>
                        );

                    }
                })

I've tried something more basic, but my 'checkBusinessFavurited' function gets called 4 times and doesn't always have a value passed, I guess because of race conditions.

if (this.checkBusinessFavourited(route.business.id)) {
    return (
        <View><Text>true</Text></View>
    )
} else {
    return (
        <View><Text>false</Text></View>
    )
}

Answer 1

I think the problem is that the switch statement doesn't return a component but a Promise. I think you need state to solve this.

getInitialState: function(){ return { isFavourited: false } }

Then, whenever you can check, maybe on componentWillMount, you do your async operation and as a result of that reset the state.

In the render function you then just use the state.