Ottenere undefined non è un oggetto in React native durante il rendering

Question

Sono nuovo a React e React native e sto provando a retrieve data from an API e quindi lo eseguo ma mi sembra che si stiano incontrando problemi.

Posso prendere i dati dal API OK, ma quando provo e render mi sto ricevendo tutti i tipi di errori.

In sostanza, tutto ciò che sto cercando di eseguire è il rendering delle foto restituite dall'API. Dovrebbe essere semplice, giusto? Gradirei chiunque possa indicarmi la strada giusta.

che sto ricevendo errori come:

indefinita non è un oggetto (la valutazione 'this.props.photos') in RenderPhotos_render

Forse ho saltato in React Native troppo presto .. . Scusa la mia mancanza di conoscenza!

var AwesomeProject = React.createClass({ 
    getInitialState: function() { 
     return { 
     isLoading: true, 
     photos: this.props.photos 
     }; 
    }, 
    componentWillMount: function(){ 
     fetch("http://localhost:3000/api/photos/", { 
      method: "GET", 
      headers: { 
      "x-access-token":"xxxxx", 
      "x-key":"xxxx" 
      }, 
     }) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      AlertIOS.alert(
       "GET Response", 
       "Search Query -> " + JSON.stringify(responseData) 
      ) 
      this.setState({ 
       isLoading: false 
      }); 
      this.setState({ 
       photos: JSON.stringify(responseData) 
      }); 
     }) 
     .done(); 
    }, 
    render: function() { 
     if(this.state.isLoading){ 
      return <View><Text>Loading...</Text></View> 
     } 
     return (
      <RenderPhotos photos={this.props.photos}/> 
     ); 
    }, 

}); 

var RenderPhotos = React.createClass({ 
    getInitialState: function() { 
     return { 
     photos: this.props.photos 
     }; 
    }, 
    render: function(){ 
    var photos = Photos; 
    return (
     <View> 
     <Text> {this.props.photos[0]} </Text> 
     </View> 
    ) 
    } 
}); 

Answer 1

Hai due problemi.

In primo luogo, il supporto che si passa a RenderPhotos è this.props.photos, che non è definito in AwesomeProject. Esaminando la funzione render() di RenderPhotos, si tenta di accedere all'elemento nell'indice 0 di this.props.photos, che non è definito. Questo è probabilmente ciò che sta causando il tuo errore. Ho il sospetto che volevi impostare la foto puntata uguale a this.state.photos nella funzione render() del componente AwesomeProject.

In secondo luogo, all'interno componentWillMount() del componente AwesomeProject, fate due cambiamenti di stato dopo aver ottenuto le foto dalla API:

this.setState({ 
    isLoading: false 
}); 

this.setState({ 
    photos: JSON.stringify(responseData) 
}); 

E 'possibile, ma non garantito, che reagiscono forza lotto quei due setState() chiamate, in modo entrambe le proprietà di stato verranno impostate contemporaneamente e il metodo render() verrà chiamato una sola volta. Tuttavia, se queste funzioni setState() vengono eseguite in modo sincrono, la funzione render() verrà chiamata mentre this.state.loading === false e this.state.photos === undefined. Il componente RenderPhotos monterà e riceverà il puntello photos={this.state.photos} (dopo aver apportato la modifica sopra descritta). Sfortunatamente, poiché this.state.photos non è definito, si verificherà lo stesso problema di sopra quando si tenta di accedere a this.props.photos[0] all'interno della funzione render() di RenderPhotos. Ecco il mio suggerimento per risolvere il problema:

var AwesomeProject = React.createClass({ 
    getInitialState: function() { 
     return { 
     isLoading: true, 
     photos: this.props.photos 
     }; 
    }, 
    componentWillMount: function(){ 
     fetch("http://localhost:3000/api/photos/", { 
      method: "GET", 
      headers: { 
      "x-access-token":"xxxxx", 
      "x-key":"xxxx" 
      }, 
     }) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      AlertIOS.alert(
       "GET Response", 
       "Search Query -> " + JSON.stringify(responseData) 
      ) 
      // Set both state properties at the same time to avoid passing an undefined value as a prop to RenderPhotos 
      this.setState({ 
       isLoading: false, 
       photos: JSON.stringify(responseData) 
      }); 
     }) 
     .done(); 
    }, 
    render: function() { 
     if(this.state.isLoading){ 
      return <View><Text>Loading...</Text></View> 
     } 
     // RenderPhotos should receive this.state.photos as a prop, not this.props.photos 
     return (
      <RenderPhotos photos={this.state.photos}/> 
     ); 
    }, 

}); 

var RenderPhotos = React.createClass({ 
    getInitialState: function() { 
     return { 
     photos: this.props.photos 
     }; 
    }, 
    render: function(){ 
    var photos = Photos; 
    return (
     <View> 
     <Text> {this.props.photos[0]} </Text> 
     </View> 
    ) 
    } 
});