渲染时获取未定义不是 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

对于那些在上述答案中没有找到解决问题的方法的人：-

这解决了我的问题： 我从

更改了代码

import {React} from 'react';

到

import React from 'react';

发生的事情是，因为React 默认情况下从模块中导出，所以我不能用花括号括起来。

Answer 2

你有两个问题。

首先，您传递给RenderPhotos 的道具是this.props.photos，它在AwesomeProject 中是未定义的。查看RenderPhotos 的render() 函数，您尝试访问未定义的this.props.photos 索引0 处的元素。这可能是导致您的错误的原因。我怀疑您的意思是在 AwesomeProject 组件的 render() 函数中将 photos 属性设置为等于 this.state.photos。

其次，在AwesomeProject 组件的componentWillMount() 中，在从 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 是未定义的，当您尝试在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>
    )
  }
});