[解決済み] Reactネイティブでレンダリング時にundefinedがオブジェクトでないことを取得する

質問

を初めて利用します。 React と React native を実行しようとしています。 retrieve data from an API をレンダリングするのですが、問題が発生しているようです。

からのデータを取得することができます。 API を実行しようとすると render というエラーが出てしまいます。

基本的に私がやろうとしていることは、APIから返される写真をレンダリングすることです。シンプルであるべきですよね？正しい軌道で私を指すことができる人は誰でも感謝します。

というようなエラーが出ます。

RenderPhotos_render において、undefined はオブジェクトではない（'this.props.photos' を評価）。

に飛び込んでしまったかもしれません。 React Native というわけで、私の知識不足をお許しください。

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

解決方法は？

2つの問題があります。

1つ目は RenderPhotos は this.props.photos では未定義です。 AwesomeProject . の中を見ると render() の関数を使用します。 RenderPhotos のインデックス0にある要素にアクセスしようとした場合。 this.props.photos これは未定義です。これがエラーの原因でしょう。おそらく、photos プロパティを this.state.photos の中で render() の関数を使用します。 AwesomeProject コンポーネントを使用します。

次に、内部 componentWillMount() の AwesomeProject コンポーネントを使用する場合、APIから写真を取得した後に2つの状態変更を行います。

this.setState({
  isLoading: false
});

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

Reactがこの2つを一括して処理する可能性はあるが、保証はない。 setState() を呼び出すと、両方のステートプロパティが同時に設定されて render() メソッドが一度だけ呼び出されます。しかし、もしこれらの setState() 関数が同期的に実行されると render() 関数が呼び出される一方で this.state.loading === false と this.state.photos === undefined . その RenderPhotos コンポーネントは、プロップをマウントして受け取ります。 photos={this.state.photos} (上に書いたような変更をした後)。しかし、残念ながら this.state.photos が未定義であるため、上記のように this.props.photos[0] の内部で render() の関数です。 RenderPhotos . 以下は、あなたの問題を解決するための私の提案です。

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