web-dev-qa-db-fra.com

Devenir indéfini n'est pas un objet dans React native lors du rendu

Je suis nouveau sur React et React native et j'essaie de retrieve data from an API puis de le restituer, mais il semble que je rencontre des problèmes. 

Je peux récupérer les données de la variable API, mais lorsque j'essaie de la remplacer par render, toutes sortes d'erreurs se produisent. 

Essentiellement, tout ce que j'essaie de faire est de restituer les photos renvoyées par l'API. Devrait être simple droit? Apprécierait toute personne qui peut me diriger dans la bonne voie.

Je reçois des erreurs comme:

undefined n'est pas un objet (évaluer 'this.props.photos') dans RenderPhotos_render

J'ai peut-être sauté trop tôt dans React Native ... Alors excusez mon manque de connaissances!

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>
    )
  }
});
javascriptreactjsreact-native
8
James111

Vous avez deux problèmes.

Tout d'abord, l'accessoire que vous transmettez à RenderPhotos est this.props.photos, ce qui n'est pas défini dans AwesomeProject. En regardant dans la fonction render() de RenderPhotos, vous essayez d'accéder à l'élément à l'index 0 de this.props.photos, qui n'est pas défini. C'est probablement ce qui cause votre erreur. J'imagine que vous vouliez définir le paramètre prop égal à this.state.photos dans la fonction render() du composant AwesomeProject.

Deuxièmement, dans componentWillMount() du composant AwesomeProject, vous apportez deux modifications d'état après avoir obtenu des photos de l'API:

this.setState({
  isLoading: false
});

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

Il est possible, mais non garanti, que React traite en lots ces deux appels setState(). Les deux propriétés d'état seraient donc définies en même temps et la méthode render() serait appelée une seule fois. Toutefois, si ces fonctions setState() sont exécutées de manière synchrone, la fonction render() sera appelée avec this.state.loading === false et this.state.photos === undefined. Le composant RenderPhotos montera et recevra le prop photos={this.state.photos} (après avoir apporté les modifications décrites ci-dessus). Malheureusement, étant donné que this.state.photos n'est pas défini, vous rencontrerez le même problème que ci-dessus lorsque vous essayez d'accéder à this.props.photos[0] dans la fonction render() de RenderPhotos. Voici ma suggestion pour résoudre votre problème:

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

pour ceux qui ne trouvent pas de solution à leurs problèmes dans les réponses ci-dessus: -

Cela a résolu mon problème: J'ai changé le code de 

import {React} from 'react';

à

import React from 'react';
0
illusionist