未捕获到的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