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

您正在使用Firebase实时数据库的REST API，这意味着，当您调用axios.get(url)时，数据仅获得一次。

如果要从Firebase获取实时更新，请考虑使用Firebase SDK。例如，用于Firebase实时数据库的React Native Firebase SDK很成熟，并且使用Firebase的本机有线协议来侦听实时更新。要开始使用此API，请查看rnfirebase.io和Firebase documentation for web developers。

如果您真的坚持使用SDK而不是，则可以查看Firebase的REST streaming protocol，它通过REST API公开了实时更新。请注意，您可能会发现自己用自己的代码重新创建了Firebase SDK的重要部分。

无法显示实时数据，需要再次打开应用程序才能从Fiebase数据库中加载新数据

1 个答案: