未捕獲到的TypeError：無法讀取reactJS中未定義的屬性'props'

Question

我正在reactJS中嘗試一個示例，其中顯示記錄列表並刪除它們。每次刪除后刷新列表。 我看到此錯誤標題提出了許多問題，但沒有任何幫助。

var CommentBox = React.createClass({
        loadCommentsFromServer: function () {
            $.ajax({
                url: this.props.listUrl,
                dataType: 'json',
                success: function (data) {
                    this.setState({data: data});
                }.bind(this),
                error: function (xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this),
                cache: false
            });
        },
        getInitialState: function () {
            return {data: []};
        },
        componentDidMount: function () {
            this.loadCommentsFromServer();
        },
        onClickingDelete: function() {
            alert('Upper layer on click delete called');
            this.loadCommentsFromServer();
        },
        render: function () {
            return (
                    <div className="commentBox">
                        <h1>Static web page</h1>
                        <CommentList data={this.state.data} onClickingDelete={this.onClickingDelete}  />


                    </div>
            );
        }
    });


    var CommentList = React.createClass({
        render: function() {
            if (this.props.data != '') {
                var commentNodes = this.props.data.content.map(function (comment) {

                    return (
                            <div className="comment" key={comment.id}>
                                <h2 className="commentpageName">
                                    {comment.pageName}
                                </h2>

                                <p> {comment.pageContent} </p>

                                <DeleteButton deleteUrl={'/delete/' + comment.id} onClickingDelete={this.props.onClickingDelete}/>

                            </div>
                    );
                });
            }
            return (
                <div className="commentList">
                    {commentNodes}
                </div>
            );
        }
    });

    var DeleteButton = React.createClass({
        onClickingDelete: function() {
            $.ajax({
                url: this.props.deleteUrl,
                type: 'delete',
                success: function () {
                    alert('Successfully deleted');
                    this.props.onClickingDelete();
                }.bind(this),
                error: function (xhr, status, err) {
                   console.error(this.props.deleteUrl, status, err.toString());
                }.bind(this),
                cache: false
            });

        },
        render: function() {
            return (
                <button name={this.props.deleteUrl} onClick={this.onClickingDelete}>Delete</button>
            );
        }
    });


    ReactDOM.render(<CommentBox listUrl="/list/"/>, 
document.getElementById('content'));

在頁面加載中，我得到

“未捕獲的TypeError：無法讀取未定義的屬性'props'”

在CommentList的對DeleteButton的行調用中。 想知道“ this”如何變得不確定

Answer 1

當您使用array.map時， 這是未定義的，並且會在javascript中對此進行正常解析。 在嚴格模式下，它將保持不確定狀態。

• 非嚴格模式： 此解析為窗口

   > [1].map(function(test) {console.log(this)}); > [object Window] 

• 嚴格模式： 此解析為未定義

   > 'use strict'; [1].map(function(test) {console.log(this)}); > undefined 

有多種方法可以將其綁定到當前對象。

• 使用map.thisArg

   this.props.data.content.map(function(comment) { ... }, this); 

• 使用綁定

   this.props.data.content.map(function(comment) { ... }).bind(this); 

• 使用箭頭功能

   this.props.data.content.map(comment => { ... }); 

• 使用變量

   var that = this; this.props.data.content.map(function(comment) { ... onClickingDelete={that.props.onClickingDelete} ... }); 

資料來源：

如果提供了thisArg參數來進行映射，則在調用該參數時會將其傳遞給回調，以用作其this值。 否則，將傳遞未定義的值作為此值。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

在嚴格模式下，當進入執行上下文時，此值保持不變。 如果未定義，則保持未定義狀態。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this