你有两个问题.
首先,你要通过道具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} // RenderPhotos should receive this.state.photos as a prop, not this.props.photos return ( Loading... ); }, }); var RenderPhotos = React.createClass({ getInitialState: function() { return { photos: this.props.photos }; }, render: function(){ var photos = Photos; return ( ) } }); {this.props.photos[0]}
对于那些无法在上述答案中找到解决问题的方法的人:
这解决了我的问题:我更改了代码
import {React} from 'react';
至
import React from 'react';