javascript - react获取数组的数据时遇到Cannot read property 'map' of undefined
本文介绍了javascript - react获取数组的数据时遇到Cannot read property 'map' of undefined的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
当我要提取listDate的时候,map提示undefined.打印listDate的时候显示其中有map的方法。这是为什么呢?
代码很简单,就是react中文网的例子.
这是php的代码:
{
"status":0,
"records":{
"title": "Here's the book list",
"listData": [
{"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"},
{"name": "女人天生高贵", "author": "XiaoDong"},
{"name": "海是彩色的灰尘", "author": "XiaoXi"}
]
}
}
这是react代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/babel">
var ContentBox = React.createClass({
loadCommentsFromServer(){
$.ajax({
url: this.props.url,
type: 'GET',
dataType: 'json',
cache: false,
success: function (res) {
if (res.status == 0) {
this.setState({data: res.records});
}
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState (){
return {
data: []
};
},
componentDidMount: function () {
this.loadCommentsFromServer();
// setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render (){
return (
<div className="ContentBox">
<ContentTitle title={this.state.data.title}/>
<ContentList listData={this.state.data.listData}/>
</div>
);
}
});
var ContentTitle = React.createClass({
render (){
return (
<div className="ContentTitle">
<h1>{this.props.title}</h1>
</div>
);
}
});
var ContentList = React.createClass({
render (){
let dataItem = this.props.listData.map(function (data) {
return (
<ContentListItem data={data}/>
);
});
return (
<div className="ContentList">
{dataItem}
</div>
);
}
});
var ContentListItem = React.createClass({
render (){
return (
<div className="ContentListItem">
<h3 className="ContentListItem-name">{this.props.data.name}</h3>
<span className="ContentListItem-author">{this.props.data.author}</span>
</div>
);
}
});
ReactDOM.render(
<ContentBox url="./data.php" pollInterval={2000}/>,
document.getElementById('content')
);
</script>
</html>
解决方案
看清楚错误提示了吗 Cannot read property 'map' of undefined
是你调用 map 的对象是 undefined,而不是 map 是 undefined
组件初始化的时候的 state 是这样的
{
data: []
}
然后你给 ContentList
的 listData
属性的值是 this.state.data.listData
,这个时候 ajax 还没有返回数据,listData 肯定是 undefined 的
这篇关于javascript - react获取数组的数据时遇到Cannot read property 'map' of undefined的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文