獲取undefined不是React native中的對象當渲染

Question

我是React和React native的新手，並且正在嘗試retrieve data from an API，然後呈現它，但我似乎遇到了問題。

我可以抓取API的數據，但是當我嘗試和render時，我得到各種錯誤。

基本上我想要做的就是呈現從API返回的照片。應該簡單嗎？希望能夠指引我走向正確軌道的任何人。

我得到這樣的錯誤：

不確定是不是一個對象在RenderPhotos_render

（評估 '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> 
    ) 
    } 
}); 

Answer 1

你有兩個問題。

首先，你傳給RenderPhotos的道具是this.props.photos，這在AwesomeProject中未定義。查看RenderPhotos的render()函數，嘗試訪問this.props.photos索引0處的元素，該元素未定義。這可能是你的錯誤。我懷疑你的意圖是在AwesomeProject組件的render()功能中設置等於this.state.photos的照片道具。

其次，裏面的AwesomeProject組件的componentWillMount()過去，兩個狀態變化您從API得到照片後：

this.setState({ 
    isLoading: false 
}); 

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

這是可能的，但不能保證，該陣營的威力批量這兩個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> 
    ) 
    } 
});