当我要提取listDate的时候,map提示undefined.打印listDate的时候显示其中有map的方法。这是为什么呢？
代码很简单，就是react中文网的例子.
这是php的代码:
<code>{
"status":0,
"records":{
"title": "Here's the book list",
"listData": [
{"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"},
{"name": "女人天生高贵", "author": "XiaoDong"},
{"name": "海是彩色的灰尘", "author": "XiaoXi"}
]
}
}</code>这是react代码
<code>
<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>
<div id="content"></div>
<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}/>
);
}
});
var ContentTitle = React.createClass({
render (){
return (
<div className="ContentTitle">
<h1>{this.props.title}
);
}
});
var ContentList = React.createClass({
render (){
let dataItem = this.props.listData.map(function (data) {
return (
<ContentListItem data={data}/>
);
});
return (
<div className="ContentList">
{dataItem}
);
}
});
var ContentListItem = React.createClass({
render (){
return (
<div className="ContentListItem">
<h3 className="ContentListItem-name">{this.props.data.name}
<span className="ContentListItem-author">{this.props.data.author}
);
}
});
ReactDOM.render(
<ContentBox url="./data.php" pollInterval={2000}/>,
document.getElementById('content')
);
</script>
</code>当我要提取listDate的时候,map提示undefined.打印listDate的时候显示其中有map的方法。这是为什么呢？
代码很简单，就是react中文网的例子.
这是php的代码:
<code>{
"status":0,
"records":{
"title": "Here's the book list",
"listData": [
{"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"},
{"name": "女人天生高贵", "author": "XiaoDong"},
{"name": "海是彩色的灰尘", "author": "XiaoXi"}
]
}
}</code>这是react代码
<code>
<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>
<div id="content"></div>
<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}/>
);
}
});
var ContentTitle = React.createClass({
render (){
return (
<div className="ContentTitle">
<h1>{this.props.title}
);
}
});
var ContentList = React.createClass({
render (){
let dataItem = this.props.listData.map(function (data) {
return (
<ContentListItem data={data}/>
);
});
return (
<div className="ContentList">
{dataItem}
);
}
});
var ContentListItem = React.createClass({
render (){
return (
<div className="ContentListItem">
<h3 className="ContentListItem-name">{this.props.data.name}
<span className="ContentListItem-author">{this.props.data.author}
);
}
});
ReactDOM.render(
<ContentBox url="./data.php" pollInterval={2000}/>,
document.getElementById('content')
);
</script>
</code>
应该是因为初始化第一次渲染的时候异步数据返回之前，listData是undefined，给个初始值［］就好了
看清楚错误提示了吗 Cannot read property 'map' of undefined 是你调用 map 的对象是 undefined，而不是 map 是 undefined
组件初始化的时候的 state 是这样的
<code>{
data: []
}</code>然后你给 ContentList 的 listData 属性的值是 this.state.data.listData，这个时候 ajax 还没有返回数据，listData 肯定是 undefined 的
