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行调用中。想知道“这个”如何变得不明确

Answer 1

当您使用array.map时，此未定义，并且在javascript中经历 this 的正常分辨率。在严格模式下，它将保持不确定。

非严格模式：此解析为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);

使用bind

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参数来映射，它将被传递给   调用时的回调，用作其值。否则，价值   undefined将被传递以用作其值。   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

未捕获的TypeError：无法读取reactJS中未定义的属性'props'

1 个答案: