反應本地導航不承諾后呈現

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上進行檢查，就可以進行異步操作，並由此重置狀態。

在渲染功能中，您只需使用狀態即可。