why my data is not displayed from firebase as soon as I add an item

Question

I have a problem with the display of my cards. when i add a product to firebase it adds well but when i want to display it it doesn't display anything. I think the problem comes from the key but I don't know how to solve the problem. when I do not add a product and I just display the data that I already have in the database it displays well

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>
        )
    }
}

Answer 1

In your FlatList , you can input the state directly as your data

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