首页 > react获取数组的数据时遇到Cannot read property 'map' of undefined

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: []
}

然后你给 ContentListlistData 属性的值是 this.state.data.listData,这个时候 ajax 还没有返回数据,listData 肯定是 undefined 的


应该是因为初始化第一次渲染的时候异步数据返回之前,listData是undefined,给个初始值[]就好了

【热门文章】
【热门文章】