wake-up-neo.com

Das Abrufen von undefined ist kein Objekt in React native beim Rendern

Ich bin neu in React und React native und versuche, retrieve data from an API und dann zu rendern, aber ich scheine Probleme zu haben. 

Ich kann die Daten von API in Ordnung nehmen, aber wenn ich versuche und render, erhalte ich alle möglichen Fehler. 

Im Grunde versuche ich nur, die von der API zurückgegebenen Fotos zu rendern. Sollte einfach richtig sein? Würde mich über jeden freuen, der mich auf die richtige Spur weisen kann.

Ich bekomme Fehler wie:

undefined ist kein Objekt (das 'this.props.photos' auswertet) in RenderPhotos_render

Ich bin vielleicht zu früh in React Native gesprungen ... Entschuldigen Sie mein mangelndes Wissen!

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

Sie haben zwei Probleme.

Zunächst ist die Requisite, die Sie an RenderPhotos übergeben, this.props.photos, die in AwesomeProject nicht definiert ist. Wenn Sie die Funktion render() von RenderPhotos betrachten, versuchen Sie, auf das Element mit Index 0 von this.props.photos zuzugreifen, das nicht definiert ist. Das ist wahrscheinlich der Grund für Ihren Fehler. Ich vermute, Sie wollten die Foto-Requisite gleich this.state.photos in der render()-Funktion der AwesomeProject-Komponente setzen.

Zweitens nehmen Sie in componentWillMount() der AwesomeProject-Komponente zwei Statusänderungen vor, nachdem Sie Fotos von der API erhalten haben:

this.setState({
  isLoading: false
});

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

Es ist möglich, aber nicht garantiert, dass React diese beiden setState()-Aufrufe stapeln kann, sodass beide Statuseigenschaften gleichzeitig festgelegt werden und die render()-Methode nur einmal aufgerufen wird. Wenn diese setState()-Funktionen jedoch synchron ausgeführt werden, wird die render()-Funktion während this.state.loading === false und this.state.photos === undefined aufgerufen. Die RenderPhotos-Komponente wird montiert und empfängt die Eigenschaft photos={this.state.photos} (nachdem ich die oben beschriebene Änderung vorgenommen habe). Da this.state.photos nicht definiert ist, wird das gleiche Problem auftreten, wenn Sie versuchen, auf this.props.photos[0] in der render()-Funktion von RenderPhotos zuzugreifen. Hier ist mein Vorschlag, um Ihr Problem zu beheben:

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

für diejenigen, die keine Lösung für ihre Probleme in den obigen Antworten finden: -

Dies löste mein Problem: Ich habe den Code von geändert 

import {React} from 'react';

zu

import React from 'react';
0
illusionist