Reactnative 渲染时获取未定义不是 React Native 中的对象

你有两个问题.

首先，你传递给RenderPhotos的props 是this.props.photos，在AwesomeProject中没有定义.在RenderPhotos的render()函数中，您try 访问this.props.photos的索引0处的元素，这是未定义的.这可能就是你犯错误的原因.我猜你是想在AwesomeProject组件的render()函数中将photos prop设置为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组件将安装并接收props 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>
    )
  }
});