React native 调用Tab.Screen组件时，查询未按时执行

我有一个使用react导航的项目，我正在实现如下底部选项卡：

 render() {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Home" component={this.HomeScreen} />
                <Tab.Screen name="Settings" component={this.SettingsScreen} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

调用下面的函数时，它没有要呈现的数据，因为

this.state.discounters

是空的，因为以后调用了

getdiscounters（）

：

 restaurants_discounts() {
    return (
        <View style={styles.exampleContainer}>             
            <Carousel
                ref={c => this._slider1Ref = c}
                data={this.state.discounts}
                renderItem={this._renderDiscounts.bind(this)}                   
                ...           
            >
            </Carousel>
        </View>
    );
}


getDiscounts() {   //this is being called after `restaurants_discounts()` has been called 
        var ref = firestore().collection('discounts')
        ref.onSnapshot((querySnapshot => {
             var discounts = querySnapshot.docs.map(doc => { return { ...doc.data(), discount_id: doc.id } });
             this.setState({
                discounts: discounts                        
             });                
        }));
    }
}

---

仅在定义this.state.discount时返回组件。例如：

    restaurants_discounts() {
        if (this.state.discounts === undefined || this.state.discounts === null) 
            return (<View><Text>Loading...</Text></View>);
        return ( 
            <View style={styles.exampleContainer}>             
                <Carousel
                    ref={c => this._slider1Ref = c}
                    data={this.state.discounts}
                    renderItem={this._renderDiscounts.bind(this)}                   
                    ...           
                >
                </Carousel>
            </View>
        );
    }

餐厅折扣（）{
if（this.state.discounters==undefined | | this.state.discounters==null）
返回（加载…）；
报税表（
这个.\u slider1Ref=c}
数据={this.state.discounters}
renderItem={this.\u renderDiscounts.bind（this）}
...           
>
);
}

这将显示加载…，所以？！我需要显示提取的数据。问题是它是在render（）被装载后进行抓取的。我在代码中有一个输入错误，修复了它。应该是这个。州。折扣与此无关，请仔细阅读我的帖子！我需要显示获取的数据，而不是加载的ICON代码，我已经检查了您的数据（我假设在对象this.state.discounters中）。如果数据不存在，则显示加载消息。如果确实存在，请显示您的数据。这就是React的工作原理。我知道React是如何工作的，我问的是为什么数据没有显示（它们处于状态），但似乎在获取数据之前我正在进行渲染，所以我应该如何解决这一问题。

componentDidMount() {   
   this.getDiscounts();
}

    restaurants_discounts() {
        if (this.state.discounts === undefined || this.state.discounts === null) 
            return (<View><Text>Loading...</Text></View>);
        return ( 
            <View style={styles.exampleContainer}>             
                <Carousel
                    ref={c => this._slider1Ref = c}
                    data={this.state.discounts}
                    renderItem={this._renderDiscounts.bind(this)}                   
                    ...           
                >
                </Carousel>
            </View>
        );
    }