Javascript 渲染时未定义不是 React Native 中的对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34478162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting undefined is not an object in React native when rendering
提问by James111
I'm new to Reactand React nativeand am trying to retrieve data from an APIand then render it but I seem to be running into problems.
我是新手React，React native并且正在尝试retrieve data from an API然后渲染它，但我似乎遇到了问题。
I can grab the data from the APIalright, but when I try and renderit I'm getting all sorts of errors.
我可以从API好的那里获取数据，但是当我尝试render它时，我会遇到各种错误。
Essentially all I'm trying to do is render the photos that are returned from the API. Should be simple right? Would appreciate anyone who can point me in the right track.
基本上我要做的就是渲染从 API 返回的照片。应该很简单吧？将不胜感激任何能指出我正确方向的人。
I'm getting errors like:
我收到如下错误：
undefined is not an object (evaluating 'this.props.photos') in RenderPhotos_render
undefined 不是 RenderPhotos_render 中的对象（评估“this.props.photos”）
I may have jumped into React Nativetoo early...So excuse my lack of knowledge!
我可能跳得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>
)
}
});
采纳答案by Brandon
You have two problems.
你有两个问题。
First, the prop you pass to RenderPhotosis this.props.photos, which is undefined in AwesomeProject. Looking in the render()function of RenderPhotos, you try to access the element at index 0 of this.props.photos, which is undefined. That's probably what's causing your error. I suspect you meant to set the photos prop equal to this.state.photosin the render()function of the AwesomeProjectcomponent.
首先，您传递给的道具RenderPhotos是this.props.photos，它在AwesomeProject. 查看 的render()函数RenderPhotos，您尝试访问this.props.photos未定义的索引 0 处的元素。这可能是导致您错误的原因。我怀疑您打算将照片道具设置为等于组件this.state.photos的render()功能AwesomeProject。
Second, inside componentWillMount()of the AwesomeProjectcomponent, you make two state changes after you get photos from the API:
其次，在组件内部componentWillMount()，AwesomeProject从 API 获取照片后，您会进行两个状态更改：
this.setState({
isLoading: false
});
this.setState({
photos: JSON.stringify(responseData)
});
It's possible, but not guaranteed, that React might batch those two setState()calls, so both state properties would be set at the same time and the render()method would be called only once. However, if these setState()functions are executed synchronously, the render()function will be called while this.state.loading === falseand this.state.photos === undefined. The RenderPhotoscomponent will mount and receive the prop photos={this.state.photos}(after making the change I described above). Unfortunately, because this.state.photosis undefined, you will encounter the same problem as above when you try to access this.props.photos[0]inside the render()function of RenderPhotos. Here's my suggestion to fix your problem:
有可能，但不能保证，React 可能会批处理这两个setState()调用，因此将同时设置两个状态属性，并且该render()方法只会被调用一次。但是，如果这些setState()函数是同步执行的，则该render()函数将被调用 whilethis.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>
)
}
});
回答by illusionist
for those who dont find solution to their problems in answers above:-
对于那些没有在上面的答案中找到解决问题的方法的人：-
This solved my problem: I changed code from
这解决了我的问题：我从
import {React} from 'react';
to
到
import React from 'react';
What happened is, since Reactis exported by default from the module so I cannot wrap it with curly-braces.
发生的事情是，因为React默认情况下是从模块导出的，所以我不能用花括号包裹它。
