Получение undefined не является объектом в React native при рендеринге

Question

Я новичок в React и React native и пытаюсь сделать retrieve data from an API, а затем визуализирую его, но у меня, похоже, возникают проблемы.

Я могу получить данные из API в порядке, но когда я попробую и render, я получаю всевозможные ошибки.

По существу, все, что я пытаюсь сделать, это отобразить фотографии, которые возвращаются из API. Должно быть просто правильно? Был бы признателен всем, кто может указать мне на правильный путь.

Я получаю ошибки как:

неопределенному не является объектом (оценка 'this.props.photos') в RenderPhotos_render

я, возможно, прыгнул в 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. Рассматривая функцию render()RenderPhotos, вы пытаетесь получить доступ к элементу по индексу 0 из this.props.photos, что не определено. Вероятно, это вызывает вашу ошибку. Я подозреваю, что вы хотели установить фотки для фотографий, равные this.state.photos, в функции render() компонента AwesomeProject.

Во-вторых, внутри componentWillMount() из AwesomeProject компонента, вы делаете два изменения состояния после того, как вы получите фотографии из API:

this.setState({ 
    isLoading: false 
}); 

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

Это возможно, но не гарантировано, что React, возможно, партия этих двух 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> 
    ) 
    } 
});