javascript - 为什么添加项目后我的数据没有从 Firebase 中显示

Question

我的卡片显示有问题。当我将产品添加到 firebase 时，它​​添加得很好，但是当我想显示它时，它什么也不显示。我认为问题来自关键，但我不知道如何解决问题。当我不添加产品而只显示数据库中已有的数据时，它显示得很好

export default class PostesMig extends React.Component {
    constructor () {
        super()

        this.state = {
            loading: true
        }
    }

    componentDidMount() {
        const ref = firebase.database().ref('PostesMig')

        ref.on('value', snapshot => {
            this.setState({
                postes : snapshot.val(),
                key : snapshot.key,
                loading: false
            })
        })
    }


    goToTorchesAir = (item) => this.props.navigation.navigate('Torches', {torches: item.TorchesMigRefroidiesAir, previous:'PostesMig'})
    goToTorchesEau = (item) => this.props.navigation.navigate('Torches', {torches: item.TorchesMigRefroidiesEau, previous:'PostesMig'})

    render() {

        if(this.state.loading) {
            return (
                <View style={styles.container}>
                    <Text>Chargement...</Text>
                    <ActivityIndicator size="large"></ActivityIndicator>
                </View>
            )
        }  

        const list = this.state.postes




        return (
            <View style={styles.container}>
            <ScrollView style={styles.scrollView}>
                <FlatList
                    data={list}
                    keyExtractor={(item) => item.Id.toString()}
                    renderItem={({ item }) => (
                    <View>
                        <Card
                        title={item.DesignationAS400}
                        >
                            <Text style={{marginBottom: 10}}>
                                Code Commun : {item.CodeCommun}
                            </Text>
                            <Text style={{marginBottom: 10}}>
                                Réference Fournisseur : {item.RefFournisseur}
                            </Text>

                            <Button
                            onPress={this.goToTorches}pour onPress={()=>this.goToTorchesAir(item)}
                            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
                            title='VOIR LES TORCHES AIR' />
                            {item.TorchesMigRefroidiesEau  !== undefined &&
                            <Button
                            onPress={this.goToTorches}pour onPress={()=>this.goToTorchesEau(item)}
                            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0, marginTop: 4}}
                            title='VOIR LES TORCHES EAU' />
                            }
                            <Button
                            onPress={() => this.props.navigation.navigate("AddTorche", {torches: item})}
                            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0, marginTop: 4}}
                            title='AJOUTER UNE TORCHE' />
                            <Button
                            onPress={() => this.props.navigation.navigate("AddTorche", {torches: item})}
                            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0, marginTop: 4}}
                            title='MODIFIER LE POSTE' />
                            <Button
                            onPress={() => this.props.navigation.navigate("AddTorche", {torches: item})}
                            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0, marginTop: 4}}
                            title='SUPPRIMER LE POSTE' />
                        </Card>
                    </View>
                    )}
                    />
            </ScrollView>
            <View>
            <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate("AddPoste")}>
                   <Text>Ajouter un poste</Text>
            </TouchableOpacity>
            </View>
            <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate("Home")}>
                   <Text>Retour</Text>
            </TouchableOpacity>

            </View>
        )
    }
}

标签： javascriptreactjsfirebasereact-nativefirebase-realtime-database

Answer 1

在你的FlatList，你可以state直接输入作为你的data

<FlatList
  data={this.state.postes}
  ...