Bonjour,
Je débute avec React Native et je suis en train d'essayé de mettre à jour une liste quand l'utilisateur entre quelques chose, concrêtement j'ai fait un API qui quand on lui fournit rien renvoie une liste de personnes présent dans une base de données, mais avant d'affiché toutes les personnes, j'affiche la liste de tout les départements ou il y a ces personnes, et j'ai ajouté une barre de recherche, et quand on rentre "Seine" il va ressortir la liste des personnes ce situant en "Seine-et-Marne", "Seine-Maritime" etc... l'API fonctionne, cependant je ne sais pas comment mettre à jour la <FlatList /> une fois que quelque chose est entré dans la barre, en gros refaire une requête à l'API et refresh la liste
J'ai essayé de recupérer ce que rentre l'utilisateur et mettre à jour le State, mais la Flatlist ne se met pas à jour. Je n'est pas du faire cela correctement, cependant je ne sais pas exactement ou ni pourquoi.
constructor(props) {
super(props)
this.state = {
data : null,
departement : ""
}
this.fetchDepartements();
}
fetchDepartements() {
axios.get('http://192.168.1.12/APIGSBPraticien.php?departement=' + this.state.departement).then((response) => {
console.log(response.data)
this.setState({data : response.data})
})
.catch(error => {
console.log(error);
});
}
renderItem = ({ item }) => {
return (
<ListItem>
<Text>{item.PRA_Departement==null ? "Code Postal: " + item.PRA_CP:item.PRA_Departement}</Text>
</ListItem>
)
}
handleSearch = (text) => {
console.log(text);
this.setState({departement: text}),
() => { this.fetchDepartements}
};
render() {
return (
<Root>
<Container style={{marginTop: 20}}>
<StatusBar translucent={false} />
<Header>
<Left>
<Button onPress={() => this.props.navigation.openDrawer()} transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Accueil</Title>
</Body>
</Header>
<Header searchBar rounded>
<Item>
<Icon name="search" />
<Input onSubmitEditing={text => this.handleSearch(text)} placeholder="Rechercher ..." />
</Item>
</Header>
<Content>
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={item => item.PRA_NUM}
onEndReached={()=> Toast.show({
text: 'Chargement terminé !',
type: "success",
textStyle: {marginHorizontal:100}
})}
/>
</Content>
</Container>
</Root>
)