javascript - react获取数组的数据时遇到Cannot read property 'map' of undefined

当我要提取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 的