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

Question

在React Native上，我对RightButton函数上的Navigator组件使用Promise，以便我可以根据AsyncStorage中的值返回true还是false来返回某个图标。 但是，导航器总是在我的切换大小写中返回下一个大小写，好像它不会等待我的代码完成执行一样。 此实现有什么问题，还是在呈现我的导航器RightButton之前检查AsyncStorage的另一种方法。

    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>
                        );

                    }
                })

我已经尝试了一些更基本的方法，但是我的'checkBusinessFavurited'函数被调用了4次，并且由于竞争条件的缘故，并非总是传递值。

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

Answer 1

我认为问题在于switch语句不返回组件而是Promise。 我认为您需要状态来解决此问题。

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

然后，只要您可以在componentWillMount上进行检查，就可以进行异步操作，并由此重置状态。

在渲染功能中，您只需使用状态即可。