Javascript – Reagieren auf Begegnungen. Die Eigenschaft „Map' von undefiniert kann beim Abrufen von Array-Daten nicht gelesen werden-PHP-Tutorial-php.cn

Javascript – Reagieren auf Begegnungen. Die Eigenschaft „Map' von undefiniert kann beim Abrufen von Array-Daten nicht gelesen werden

WBOY

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

Original

5347 Leute haben es durchsucht

Wenn ich listDate extrahieren möchte, wird die Karte undefiniert angezeigt. Beim Drucken von listDate wird angezeigt, dass eine Kartenmethode darin enthalten ist. Warum ist das so?
Der Code ist sehr einfach, er ist ein Beispiel für eine reagierende chinesische Website.

Dies ist der PHP-Code:

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

Nach dem Login kopieren

Dies ist Reaktionscode

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

Nach dem Login kopieren

Antwortinhalt:

Dies ist der PHP-Code:

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

Nach dem Login kopieren

Dies ist Reaktionscode

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

Nach dem Login kopieren

Das sollte daran liegen, dass listData nicht definiert ist, bevor die asynchronen Daten während des ersten Renderings zurückgegeben werden. Geben Sie einfach einen Anfangswert [] an und es ist in Ordnung

Haben Sie die Fehlermeldung deutlich gesehen? Cannot read property 'map' of undefined Das liegt daran, dass das von Ihnen als Karte bezeichnete Objekt undefiniert ist, nicht dass die Karte undefiniert ist.

Der Zustand bei der Initialisierung der Komponente ist wie folgt

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

Nach dem Login kopieren

Dann ist der Wert des ContentList-Attributs, das Sie listData gegeben haben, this.state.data.listData. Zu diesem Zeitpunkt hat Ajax keine Daten zurückgegeben und listData muss undefiniert sein