當我要提取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><!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></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><!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></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 的
