1 Question: Comment passer une liste d'objets de Server à FlatList?

question créée à Wed, May 8, 2019 12:00 AM

J'essaie de créer une liste plate contenant un tableau avec des objets contenant un tableau provenant d'un serveur. Je ne parviens pas à le faire fonctionner.

mon message d'erreur:

  

TypeError: impossible de lire la propriété 'Données' d'indéfinis

Je peux le faire fonctionner avec ma liste normale qui n'est pas extraite d'un serveur. Voici la structure de ma liste de travail

[{"DATA":[{"filter_id":"44","filter_name":"filter 1"}, {"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}]

La liste de mes serveurs a la même structure mais des valeurs différentes pour filter_name et filter_id

.

voici mon code:

constructor(props){
    super(props); 
    this.state = {
    data: [],
    oldData: [{"DATA":[{"filter_id":"44","filter_name":"filter 1"},{"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter 4"},{"filter_id":"48","filter_name":"filter 5"}],"MESSAGE":"DATA FOUND","STATUS":200}],
    page:1,
    status: null,
    isLoading: false,
    }
}
getData = async () => {
const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';
fetch(url).then((response) => response.json())
.then((responseJson) => {
   this.setState({
    data:this.state.data.concat(responseJson),
    isLoading:false
   });
})
}
componentDidMount() {
  this.getData();
}
renderRow = ({item}) => {
  console.log('item', item);
  return (
   <View style={styles.item}>
    <Text>{item.filter_name}</Text>
   </View>
  )
}
render() {
   console.log('state', this.state.data[0]);
   console.log('oldstate', this.state.oldData[0]) // this 
   return (
    <View style={styles.container}>
     <FlatList 
      data={this.state.data[0].DATA}
      renderItem={this.renderRow} 
      keyExtractor={(item, index) => index.toString()}
      />
     </View>
  );
}

Expo: https://snack.expo.io/@thesvarta/tenacious-sandwich

    
0
1 Réponses                              1                         

Le problème est que, lors du rendu initial de votre composant, this.state.data est vide, car nous devons attendre que getData renvoie toutes les données. C'est pourquoi vous ne pouvez pas accéder au début au 0600350991111101035062.

La solution consiste à mettre à jour votre fonction this.state.data[0].DATA.

getData

Vos données sont maintenant stockées directement dans 0600350991111101035062. Nous pouvons maintenant simplifier votre fonction

getData = async () => {
    const url = 'http://ollenorstrom.se/ollenorstrom.se/avoka/api/getFilter.php?page='+this.state.page+'&row_per_page=5';
    fetch(url).then((response) => response.json())
    .then((responseJson) => {
      // here we save the data, we want to access later. 
      console.log('responseJson', responseJson[0].DATA);
       this.setState({
        data:this.state.data.concat(responseJson[0].DATA),
        isLoading:false
       });
    })
  }
: this.state.data

Exemple de travail:

https://snack.expo.io/HJ--GFlnN

    
1
2019-05-08 16: 23: 10Z
render()
source placée ici