2015-12-27 39 views
5

Tôi mới đến ReactReact native và đang cố gắng retrieve data from an API và sau đó hiển thị nhưng dường như tôi đang gặp sự cố.Nhận không xác định không phải là một đối tượng trong React gốc khi hiển thị

Tôi có thể lấy dữ liệu từ API được, nhưng khi tôi thử và render, tôi đang gặp phải tất cả các loại lỗi.

Về cơ bản tất cả những gì tôi đang cố gắng làm là hiển thị các ảnh được trả lại từ API. Nên đơn giản phải không? Sẽ đánh giá cao bất cứ ai có thể chỉ cho tôi đi đúng hướng.

tôi nhận được lỗi như:

không xác định không phải là một đối tượng (đánh giá 'this.props.photos') trong RenderPhotos_render

tôi có thể đã nhảy vào React Native quá sớm .. Xin lỗi vì thiếu kiến ​​thức của tôi!

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

Trả lời

3

Bạn có hai vấn đề.

Trước tiên, giá trị bạn vượt qua RenderPhotosthis.props.photos, không được xác định trong AwesomeProject. Nhìn vào hàm render() của RenderPhotos, bạn cố gắng truy cập phần tử tại chỉ mục 0 của this.props.photos, không xác định. Đó có thể là nguyên nhân gây ra lỗi của bạn. Tôi nghi ngờ bạn có nghĩa là để đặt các bức ảnh prop bằng this.state.photos trong các chức năng render() của các thành phần AwesomeProject.

Thứ hai, bên componentWillMount() của các thành phần AwesomeProject, bạn thực hiện hai sự thay đổi trạng thái sau khi bạn nhận được ảnh từ API:

this.setState({ 
    isLoading: false 
}); 

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

Có thể, nhưng không được bảo đảm, mà Phản ứng sức đợt hai setState() cuộc gọi, vì vậy cả hai thuộc tính trạng thái sẽ được đặt cùng một lúc và phương thức render() sẽ chỉ được gọi một lần. Tuy nhiên, nếu các chức năng setState() này được thực hiện đồng bộ, chức năng render() sẽ được gọi trong khi this.state.loading === falsethis.state.photos === undefined. Các thành phần RenderPhotos sẽ gắn kết và nhận được prop photos={this.state.photos} (sau khi thực hiện thay đổi tôi đã mô tả ở trên). Thật không may, vì this.state.photos không xác định, bạn sẽ gặp phải vấn đề tương tự như trên khi bạn cố truy cập this.props.photos[0] bên trong chức năng render() của RenderPhotos. Dưới đây là đề xuất của tôi để khắc phục sự cố của bạn:

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

Một sửa đổi nhỏ là bạn có thể xóa trạng thái từ RenderPhotos vì bạn không còn sử dụng nó nữa – rmevans9

+0

Ngoài ra var ảnh = Ảnh là vô nghĩa trong hàm kết xuất. Và cuối cùng this.props.photos bắt đầu như undefined (có thể, trạng thái được thiết lập bởi một thuộc tính không được hiển thị) mà sẽ kết thúc trong một lỗi không xác định kể từ khi bạn đi thẳng đến cố gắng để hiển thị chỉ số 0 của mảng. – rmevans9

Các vấn đề liên quan