レンダリング時に未定義はReactネイティブのオブジェクトではありません

Question

私はReactとReact nativeに新しく、retrieve data from an APIを試していますが、それをレンダリングしていますが、問題が発生しているようです。

APIからデータを取得することはできますが、私が試してみるとrenderのエラーが発生します。

私がやろうとしていることは、APIから返された写真をレンダリングすることだけです。シンプルなはずですか？私を正しい方向に向けることができる人に感謝します。

私のようなエラーを取得しています：

が未定義のは、私があまりにも早くReact Nativeに飛び込んできたことがありRenderPhotos_render

に（ 'this.props.photos' を評価）オブジェクトではありません。..私の知識が不足していることを許してください！

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

2つの問題があります。

まず、RenderPhotosに渡す小道具はthis.props.photosです。これはAwesomeProjectで定義されていません。 render()の関数RenderPhotosを見ると、インデックス0のthis.props.photosの要素にアクセスしようとしていますが、これは未定義です。それはおそらくあなたのエラーの原因です。 AwesomeProjectコンポーネントのrender()機能で写真の小道具をthis.state.photosに設定することを意図していると思います。

第二に、AwesomeProjectコンポーネントのcomponentWillMount()内側に、あなたはAPIから写真を入手した後、2つの状態の変更を行います。

this.setState({ 
    isLoading: false 
}); 

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

ことは可能だが、そう、かもしれないバッチこれら2つのsetState()呼び出しを反応することが、保証の限りではありません両方の状態プロパティが同時に設定され、render()メソッドは一度だけ呼び出されます。ただし、setState()の関数を同期して実行すると、render()関数が呼び出され、this.state.loading === falseとthis.state.photos === undefinedの間に関数が呼び出されます。 RenderPhotosコンポーネントは、photos={this.state.photos}プロップをマウントして受信します（上記の変更を行った後）。残念ながら、this.state.photosは定義されていないため、RenderPhotosのrender()関数内のthis.props.photos[0]にアクセスしようとすると、上記と同じ問題が発生します。ここにあなたの問題を解決するために私の提案です：

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