javascript - react encounters Cannot read property 'map' of undefined when getting array data-PHP Tutorial-php.cn

javascript - react encounters Cannot read property 'map' of undefined when getting array data

WBOY

Release： 2016-08-08 09:06:39

Original

5269 people have browsed it

When I want to extract listDate, map prompts undefined. When printing listDate, it shows that there is a map method in it. Why is this?
The code is very simple, it is an example of react Chinese website.

This is the php code:

<code>{
"status":0,
"records":{
             "title": "Here's the book list",
             "listData": [
                 {"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"},
                 {"name": "女人天生高贵", "author": "XiaoDong"},
                 {"name": "海是彩色的灰尘", "author": "XiaoXi"}
             ]
          }
}</code>

Copy after login

This is react code

<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>

Copy after login

Reply content:

This is the php code:

<code>{
"status":0,
"records":{
             "title": "Here's the book list",
             "listData": [
                 {"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"},
                 {"name": "女人天生高贵", "author": "XiaoDong"},
                 {"name": "海是彩色的灰尘", "author": "XiaoXi"}
             ]
          }
}</code>

Copy after login

This is react code

<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>

Copy after login

It should be because listData is undefined before the asynchronous data is returned during the initial rendering. Just give an initial value [] and it will be fine

Did you see the error message clearly? Cannot read property 'map' of undefined It means that the object you called map is undefined, not that map is undefined

The state when the component is initialized is like this

<code>{
  data: []
}</code>

Copy after login

Then the value of the listData attribute you give to ContentList is this.state.data.listData. At this time, ajax has not returned data, and listData must be undefined