Datos no son Mostrados en render despues de llamada a servidor
Publicado por Marvin (26 intervenciones) el 18/09/2019 20:16:22
Hola comunidad, quisiera que me ayuden guiandome con un pequeño problema que tengo con React Native (se que este foro es de React JS pero practicamente es lo mismo que React Native).
Estoy usando Axios para obtener datos del servidor por medio de Get, usando el metodo de ciclo de vida componentWillMount para llenar el array data: [] del estado del componente.
Este es uno de los objetos Json que obtengo desde la API, son 10 objetos pero no hace falta poner los 10:
Como siguiente paso despues de que se ejecute componentWillMount(), my idea es llenar Dinamicamente un <View> usando un cilco for o la funcion map() de javascript, para agregar imagenes y ciertos datos a un Slider de mi App, pero no obtengo nada, mi slider se queda vacio sin ninguna imagen a pesar de que la variable de estado data si esta llena. Los metodos para llenar dinamicamente mi <View> son los siguientes:
Luego, una vez que se realiza el ciclo for para crear el contenido dinamico se inserta en el metodo render() de la clase del componente:
Pero en el dispositivo simulador no aparece ninguna imagen y obtengo el siguiente error:
TypeError: TypeError: undefined is not an object (evaluating '_this.state.data[i].Imagen')
Alguien que maneje React que me pueda ayudar? creo que puede ser por motivos de ciclo de vida del componente.
Incluso he tratado de simular el objeto data agregando los objetos manualmente para verificar si es algun error de sincronizacion, pero el problema persiste, NO SE MUESTRA NINGUN ERROR en la consola, pero las imagenes siguen sin aparecer, El array data modificado manualmente seria el siguiente:
Estoy usando Axios para obtener datos del servidor por medio de Get, usando el metodo de ciclo de vida componentWillMount para llenar el array data: [] del estado del componente.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
url1: "https://miApi.com/mydata.json" //URL Ficticia para este ejemplo
} }//Metodo para obtener los datos desde de una API propia
//Muestro los datos por consola, y los datos si estan en el array data.
componentWillMount() {
this.setState({loading: true})
axios.get(this.state.url1)
.then(
(res) => {
this.setState({
data: res.data,
loading: false});
console.log("The data is:\n", this.state.data); //El array de objetos se muestran en la consola
}).catch(err => {
console.log('There was an error:', err);
});
}Este es uno de los objetos Json que obtengo desde la API, son 10 objetos pero no hace falta poner los 10:
1
2
3
4
{Nombre: "Imagen 1",
Imagen: "https://static2.bigstockphoto.com/3/8/2/large2/283895071.jpg"
}Como siguiente paso despues de que se ejecute componentWillMount(), my idea es llenar Dinamicamente un <View> usando un cilco for o la funcion map() de javascript, para agregar imagenes y ciertos datos a un Slider de mi App, pero no obtengo nada, mi slider se queda vacio sin ninguna imagen a pesar de que la variable de estado data si esta llena. Los metodos para llenar dinamicamente mi <View> son los siguientes:
1
2
3
4
5
6
7
8
9
10
11
12
CreateFoodViews = () => {
foods = [];
for (var i = 0; i < this.state.data.length; i++) {
foods.push(
<View key={i}>
<Text>{ this.state.data[i].Nombre }</Text>
<View style={{flex:1}}><Image source={{ uri: this.state.data[i].Imagen }} style={{ width:null, height:null, resizeMode:'cover', flex:1}}/></View>
</View>
); }return foods;
}Luego, una vez que se realiza el ciclo for para crear el contenido dinamico se inserta en el metodo render() de la clase del componente:
1
2
3
4
5
6
7
8
9
render() {
return (<View style={{flex:1}}>
<ViewPagerAndroid style={{flex:1, backgroundColor:'black'}} initialPage={0}>
{ this.CreateFoodViews() }
</ViewPagerAndroid>
</View>
);};Pero en el dispositivo simulador no aparece ninguna imagen y obtengo el siguiente error:
TypeError: TypeError: undefined is not an object (evaluating '_this.state.data[i].Imagen')
Alguien que maneje React que me pueda ayudar? creo que puede ser por motivos de ciclo de vida del componente.
Incluso he tratado de simular el objeto data agregando los objetos manualmente para verificar si es algun error de sincronizacion, pero el problema persiste, NO SE MUESTRA NINGUN ERROR en la consola, pero las imagenes siguen sin aparecer, El array data modificado manualmente seria el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data: [
{Nombre: "Imagen 1",
Imagen: "https://static2.bigstockphoto.com/3/8/2/large2/283895071.jpg"
},
{Nombre: "Imagen 2",
Imagen: "https://static2.bigstockphoto.com/3/8/2/large2/283896762.jpg"
},
{Nombre: "Imagen 3",
Imagen: "https://static2.bigstockphoto.com/3/8/2/large2/283834073.jpg"
}.......
]Valora esta pregunta
0
