未捕获的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:无法读取未定义的属性'道具'"

在CommentList的DeleteButton行调用中.想知道"这个"怎么会变得不明确

Answer 1

当你使用array.map时,这是未定义的并且在javascript中经历了这个的正常分辨率.在严格模式下,它将保持不确定.

• 非严格模式:这解析为Window

  > [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参数来映射,则在调用时它将被传递给回调,以用作其此值.否则,将传递未定义的值以用作其此值. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

在严格模式下,此值保持为进入执行上下文时设置的值.如果没有定义,它仍然是未定义的. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this