не в состоянии отображать данные в реальном времени, требуется снова и снова открывать приложение для загрузки новых данных из базы данных Fiebase

Question

Я загружаю введенные пользователем данные на этот экран, но отображаются только данные, введенные перед открытием приложения, новые введенные пользователем данные не отображаются, пока мы не откроем приложение повторно.

этомой код, с использованием этих данных из базы данных отображаются, но не последние обновления, сделанные пользователем.

constructor(){
    super()
    this.state ={
        persons:[]
    }
}

renderItem =({item}) => {
    const start = 'mailto:';
    let mail= item.email;
    const end = '?subject=Application for Job';
    const add = start.concat(mail,end);
    console.log(item.email);
    return(
        <View style={{fles:1, flexDirection:'column',marginBottom:5,marginLeft:5,marginRight:5, borderRadius: 4, borderWidth: 0.5, borderColor: '#6d7ba5',}}>
            <Text style={styles.text}>Job Title:  {item.JobTitle}</Text>
            <Text style={styles.text2}>Job Description:  {item.JobDesc}</Text>
            <Text style={styles.text2}>Working Hours:  {item.Timing}</Text>
            <Text style={styles.text2}selectable={true}
            onPress={() => Linking.openURL(add)}>Payment:  {item.Payment}</Text>
            <Text style={styles.text2} selectable={true}
            onPress={() => Linking.openURL(add)}>Contact Info:  {item.Number}</Text>
            <Text style={styles.text2} selectable={true}
            onPress={() => Linking.openURL(add)} >Email:  {item.Email}</Text>
            <Text style={styles.text2} selectable={true}
            onPress={() => Linking.openURL(add)}>Remark:  {item.Remark}</Text>
        </View>
    )

}
componentDidMount(){
    const url ='https://parttimer-88182.firebaseio.com/users.json';

    axios.get(url).then(res =>{
        const persons = res.data;
        console.log(Object.entries(persons));
        this.setState({persons});
    }); 


}


refreshHandler(){
    const url ='https://parttimer-88182.firebaseio.com/users.json';

    axios.get(url).then(res =>{
        const persons = res.data;
        console.log(Object.entries(persons));
        this.setState({persons});
    }); 


}
render() {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <ImageBackground source ={require('../../assets/Background/back2.jpg')} style={{width:'100%', height:'100%'}}>
            <View style={styles.container}>

                <Header style={{height:65,backgroundColor:'transparent'}}>                          
                    <Icon name='angle-double-right' style={styles.icon} onPress={() => this.props.navigation.navigate('openDrawer')} />
                    <Text style={{fontWeight: 'bold', color:'black' ,fontSize:30,marginTop:20 }} >Explore Adds</Text>
                    <Icon name='info-circle' style={styles.icon2} onPress={this._simpleAlertHandler} />
                </Header>

                <Text style={{ fontSize: 24, fontWeight: '700',marginTop:5, paddingHorizontal: 20 ,backgroundColor:'rgba(217,224,244,0.7)'}}>
                            Select your desired job here !
                </Text>

                <View style={{ height:130,backgroundColor:'rgba(217,224,244.0.7)',borderRadius: 4, borderWidth: 0.5, borderColor: '#6d7ba5'}}>
                    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                        <Category 
                            imageUri={require('../../assets/experiences.jpg')}
                            name="Janta Travels"/>
                        <Category 
                            imageUri={require('../../assets/rajat.jpg')}
                            name="HistoryGuider" />
                        <Category 
                            imageUri={require('../../assets/army.jpg')}
                            name="Army Trainers"/>
                        <Category 
                            imageUri={require('../../assets/experiences.jpg')}
                            name="Job 1"/>

                    </ScrollView>
                </View>
                <View style={{flex:1,marginTop:5}}> 
                    <FlatList
                        data={Object.entries(this.state.persons).map(item =>(item[1]))}
                        renderItem={this.renderItem}
                    />
                    <View style={{height:30}} >
                    <Button title="    REFRESH    " onPress={this.refreshHandler}
                    color='#841585' borderRadius={50} />

                    </View>
                </View>

            </View>
            </ImageBackground>
    </SafeAreaView>        
    );
}

}

Может кто-нибудь сказать мне, как загрузить самые последние входные данные, сделанныепользователь.

Answer 1

Вы используете REST API базы данных Firebase Realtime, что означает, что данные получают только один раз, когда вы звоните axios.get(url).

Если вы хотите получать обновления в реальном времени от Firebase, подумайтеиспользуя Firebase SDK для этого.Например, React Native Firebase SDK для базы данных Firebase Realtime является достаточно зрелым и использует собственный проводной протокол Firebase для прослушивания обновлений в реальном времени.Чтобы начать работу с API, посмотрите rnfirebase.io и документацию Firebase для веб-разработчиков .

Если вы действительно настаиваете на не с использованием SDK вы можете взглянуть на протокол потоковой передачи REST Firebase , который предоставляет обновления в реальном времени через REST API.Просто отметьте, что вы, вероятно, будете таким образом воссоздавать важные части Firebase SDK в своем собственном коде.