Как обновить Flatlist с текстом ввода с помощью Json API - PullRequest
Новая
       25

Как обновить Flatlist с текстом ввода с помощью Json API

1 голос
/ 04 мая 2019

Я пытаюсь обновить Flatlist, когда пользователь вводит что-то в строке поиска, но я не знаю точно, как это сделать.

Цель здесь - показать все французские графства, возвращенныеAPI и когда вы вводите что-то в строке поиска, API вернет только определенное графство

Я использую NativeBase и Axios 

import React from 'react'
import { View, StyleSheet, StatusBar, ListView, FlatList} from 'react-native'
import { } from 'react-navigation'
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, List, ListItem, Spinner, Toast, Root, Input, Item } from 'native-base';
import axios from 'axios';
import { Directions } from 'react-native-gesture-handler';

export default class Home extends React.Component {

  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() {
      if (this.state.data === null) {
        return(
          <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>
          <Content>
          <Spinner style={{marginVertical:250}} color='green'/>
          </Content>
        </Container>
        )
      } else {
        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>
        )
      }
    }
}

Я пытался получить пользовательский ввод (handleSearch ()) и обновить состояние, но как только я закончил, я хочу обновить Flatlist.

...