1 Pregunta: ¿Cómo pasar una lista con objetos del servidor a FlatList?

pregunta creada en Wed, May 8, 2019 12:00 AM

Estoy intentando crear una FlatList que contiene una matriz con objetos que tiene una matriz de un servidor y no puedo hacer que funcione.

mi mensaje de error:

  

TypeError: no se puede leer la propiedad 'Datos' de undefined

Puedo hacer que funcione con mi lista normal que no se obtiene de un servidor. Aquí está la estructura de mi lista de trabajo

[{"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}]

Mi lista de servidores tiene la misma estructura pero diferentes valores de nombre_de_filtro e ID_de_filtro

Aquí está mi código:

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 Respuestas                              1                         

El problema es que en la representación inicial de su componente this.state.data está vacío, porque tenemos que esperar hasta que getData devuelva cualquier dato. Por eso no puede acceder al this.state.data[0].DATA al principio.

La solución es actualizar un poco su función getData.

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

Ahora sus datos se almacenan directamente en this.state.data. Ahora podemos simplificar su función render():

 <FlatList 
       data={this.state.data} // simplified, passing an empty array at the beginning is ok
       renderItem={this.renderRow} 
       keyExtractor={(item, index) => index.toString()}
      />

Ejemplo de trabajo:

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

    
1
2019-05-08 16: 23: 10Z
fuente colocada aquí