未捕获的类型错误:无法读取属性'道具'reactJS中未定义的

Uncaught TypeError: Cannot read property 'props' of undefined in reactJS

本文关键字：道具 reactJS 未定义 属性 类型 错误 读取      更新时间：2023-09-26

我正在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'));

页面加载时，我得到

"未捕获的类型错误：无法读取未定义"的属性"props"

在CommentList对DeleteButton的行调用中。想知道"this"如何去未定义

当您使用array.map时，this是未定义的，并在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);

  • 使用绑定

    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值。否则，值undefined将作为其this值传递使用。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

相关文章：