[英]why my data is not displayed from firebase as soon as I add an item
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.
当我将产品添加到 firebase 时,它添加得很好,但是当我想显示它时,它什么也不显示。 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>
)
}
}
In your FlatList
, you can input the state
directly as your data
在您的
FlatList
中,您可以直接输入state
作为您的data
<FlatList
data={this.state.postes}
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.