Refresh une Flatlist avec bare de recherche

Zeldri
Javascript

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

1 réponse

jean-smaug

Salut :)
Si tu regardes ce bout de doc il est dit de ne jamais appeler setState() dans le constructeur.
https://reactjs.org/docs/react-component.html#constructor

Donc pour fixer ton problème créé un componentDidMount et place y ton this.fetchDepartements();.
Et il est d'usage de faire les appels résaux dans le componentDidMount() (cf https://reactjs.org/docs/react-component.html#componentdidmount)