0

Soy nuevo en React Native y estaba siguiendo un tutorial de como parsear un JSON y casi en el paso final me ha saltado este error: introducir la descripción de la imagen aquí

El problema viene cuando (después de asegurarme que el contenido se ha cargado en el primer if) intento asignara a la variable 'movies' el contenido que recoge del JSON. Este es el código:

import  React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ActivityIndicator
} from 'react-native';


export default class App extends React.Component{

  constructor(props) {
    super(props);
    this.state= {
      isLoading:true,
      dataSource:null,
    }
  }

  componentDidMount() {
    return fetch('https://facebook.github.io/react-native/movies.json')
        .then( (response) => response.json())
        .then( (responseJson) => {
          this.setState({
            isLoading:false,
            dateSource: responseJson.movies,
          })
        })
        .catch( (error) => {
          console.log(error)
        });
  }


  render() {
    if(this.state.isLoading){
      return (
          <View style={stylesss.container}>
            <ActivityIndicator/>
          </View>
      )
    } else {

      let movies = this.state.dataSource.map((value, key) => {
        return <View key={key} style={stylesss.item}>
              <Text>{val.title}</Text>
            </View>
      });

      return (
          <View style={stylesss.container}>
            <Text>{movies}</Text>
          </View>
      );
    }
  }
}



Si alguien me pudiese ayudar, se lo agradecería un montón

1
  • La razón de porque no ves nada en pantalla es porque en el setState tienes dateSource y no dataSource como defines en tu state. Con respecto a la respuesta que te dieron ya Commented el 3 sept. 2019 a las 19:02

1 respuesta 1

0

Los states deberías inicializarlos dependiendo el tipo de valor que esperas, en este caso, dataSource va a ser un Array, pero hasta que no tenga datos va a ser null, es decir que la primera vez, va a tratar de hacer un null.map() que es incorrecto. Si cambias la inicialización a:

this.state= {
      isLoading:true,
      dataSource:[], //<-- Array vacío en lugar de null
    } 

no va a romper porque va a hacer [].map() que no es incorrecto.

Cuando el fetch termine, va a cambiar el state y va a mostrar los datos siempre que responseJson.movies sea un Array.

Cuidado que en <Text>{val.title}</Text> deberías poner <Text>{value.title}</Text>

5
  • Ahora no me sale el error, pero no me saca nada por pantalla. Como si el Array estuviera vacío. No entiendo porque al chico del video le funcionaba sin problema: youtube.com/watch?v=u1JQwaIds7A&t=721s
    – nerviosus
    Commented el 3 sept. 2019 a las 18:52
  • 1
    eso puede ser o bien porque el ajax no retorna nada o bien porque retorna vacía esa propiedad, si te fijas en la pestaña network (o red) del navegador deberías poder ver si el ajax se hace o no y que es lo que devuelve.
    – Emeeus
    Commented el 3 sept. 2019 a las 18:56
  • 1
    La razón de porque no ves nada en pantalla es porque en el setState tienes dateSource y no dataSource como defines en tu state Commented el 3 sept. 2019 a las 19:02
  • 1
    Buen punto, @nerviosus fíjate en lo que menciona Germán aquí arriba. Tienes también un typo.
    – Emeeus
    Commented el 3 sept. 2019 a las 19:10
  • Qué vergüenza, no me había dado cuenta. Me pasa siempre con WebStorm, creo que no leo bien los errores. Bueno, muchísimas gracias a los dos.
    – nerviosus
    Commented el 3 sept. 2019 a las 20:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.