在承诺

Question

在React Native上，我在RightButton函数上使用了Navigator组件的Promise，这样我就可以返回一个特定的图标，具体取决于AsyncStorage中的值是返回true还是false。但是导航器总是在我的开关盒中返回下一个盒子，好像它不会等待我的代码完成执行。这个实现有什么问题，或者在渲染我的Navigator 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>
                        );

                    }
                })

我尝试了一些更基本的东西，但是我的检查业务很有价值＆＃39;函数被调用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上，你进行异步操作，并由于重置状态。

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