未捕获的类型错误:无法读取属性'地图'的未定义
Uncaught TypeError: Cannot read property 'map' of undefined with React
我在React中实现了一个小的测试应用程序,通过AJAX获取数据,但它不能像集成的那样工作,因此我得到了以下错误:
Uncaught TypeError: Cannot read property 'map' of undefinedInline JSX script
代码如下:
<div id="content"></div>
<script type="text/jsx">
var Bodypart = React.createClass({
render: function() {
return (
<div>
{this.props.name}
</div>
)
}
})
var BodypartList = React.createClass({
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({bodyparts: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
var bodypartItems = this.state.bodyparts.map(function (bodypart) {
return (
<Bodypart
name={bodypart.name}
/>
);
});
return (
<div>
{bodypartItems}
</div>
);
}
});
React.render(
<BodypartList url="/api/bodyparts/" />,
document.getElementById('content')
);
</script>
来自/api/bodyparts/
:的响应
{
"bodyparts": [
{
"id": 1,
"name": "Face"
},
{
"id": 3,
"name": "Mouth"
},
{
"id": 2,
"name": "Nose"
}
]
}
在初始渲染时,this.state.bodyparts
是undefined
,因此出现错误。
你应该退回
{bodyparts:[]}
来自CCD_ 4。
此外,在success
回调中,您应该设置如下状态:
this.setState(data);
因为您的api已经将bodyparts
作为其结果的一部分返回。
this.state.bodyparts
未定义。在ajax完成之前,该组件正在进行渲染。尝试设置初始状态
相关文章:
- 主干中的模型属性未定义
- JavaScript 2d 数组导致“无法读取未定义的属性'未定义'”
- JSON对象属性未定义
- Waypoint的循环,退出循环后属性未定义
- Javascript:错误“无法设置属性”..'未定义”
- 翡翠 - 显示对象属性 - 未定义
- 属性未定义,但控制台.log可以看到它
- JavaScript 对象的属性未定义
- Javascript 对象属性未定义(但属性已设置)
- DOM 元素属性未定义 - jquery / ruby on rails.
- Nodejs JSON 属性未定义
- 错误:窗口打开器的属性未定义
- angular Js:Array.lenght属性未定义
- 正在尝试访问JavaScript对象的属性=未定义
- Marionette属性未定义,请从API获取
- AngularJS作用域属性未定义
- 对象的属性未定义,尽管已指定值
- 为什么我一直收到一个错误,说对象属性未定义
- 对象属性未定义,但我看到它不是
- .map()img src属性未定义