Uncaught 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：未定義のプロパティ 『小道具』を読み込めません」取得していますDeleteButtonにCommentListのラインコールに。 "this"がどのように定義されていないのかも知れない。助けてください。

Answer 1

あなたがarray.map、を使用する場合、このが定義されていないとJavaScriptでこのの通常の解像度を受けます。 strictモードでは、未定義のままです。

• 非厳密モード：このがウィンドウに解決

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

• 厳密モード：このは未定義

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

THERに解決eは、現在のオブジェクトにバインドするさまざまな方法です。変数を使用矢印関数

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

を使用してバインド

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

を使用map.thisArg

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

を使用

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

出典：おそらく

If a thisArg parameter is provided to map, it will be passed to callback when invoked, for use as its this value. Otherwise, the value undefined will be passed for use as its this value. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

In strict mode, the value of this remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this