ReactJSとAJAX Uncaught TypeError：プロパティ 'bugs' of Undefinedを読み取ることができません

Question

React関数内でReactクラスの状態を参照しながらAJAXリクエストを作成しています。しかし、AJAXリクエストを入力すると、状態への参照が未定義のTypeErrorが発生します。

ここに私のコードスニペットはだ、私は「どこでコンテキストを失っていますここで続行する方法が不明メートル

class BugList extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      bugs: [], 
     }; 
    } 
    addBug(bug) { 
     $.ajax({ 
      type: 'POST', url: '/api/bugs', contentType: 'application/json', data:JSON.stringify(bug), 
      success: function(data) { 
       var bug = data; 

       var bugsModified = this.state.bugs.concat(bug); 
       this.setState({bugs: bugsModified}); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.log("error adding bug: ", err); 
      } 
     }); 
    } 
    componentDidMount() { 
     $.ajax('/api/bugs').done(function(data) { 
      this.setState({bugs: data}) 
     }.bind(this)); 
    } 
    render() { 
     return(
      <div> 
       <h1>Bug Tracker</h1> 
       <BugFilter /> 
       <hr /> 
       <BugTable bugs={this.state.bugs}/> 
       <hr /> 
       <BugAdd addBug={this.addBug}/> 
      </div> 
     ); 
    } 
} 

問題の問題行：。？

var bugsModified = this.state.bugs.concat(bug); 

エラーログ：

Uncaught TypeError: Cannot read property 'bugs' of undefined 

Answer 1

bindaddBug methodにする必要があります。

<BugAdd addBug={this.addBug.bind(this)}/> 

あなたはこのように、親コンポーネントにbindmethodことを、子コンポーネントに親コンポーネントからメソッドを渡している。

<BugAdd addBug={this.addBug.bind(this)}/> 

か、このように、またconstructorでbindingを定義することができます。

constructor() { 
    super(); 
    this.state = { 
     bugs: [], 
    }; 
    this.addBug = this.addBug.bind(this); 
} 

と直接使用：

<BugAdd addBug={this.addBug}/> 

Answer 2

それは...してみてください、

addBug(bug) { 
     ***var that = this;*** 
     $.ajax({ 
      type: 'POST', url: '/api/bugs', contentType: 'application/json', data:JSON.stringify(bug), 
      success: function(data) { 
       var bug = data; 

       var bugsModified = ***that.state.bugs.concat(bug)***; 
       this.setState({bugs: bugsModified}); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.log("error adding bug: ", err); 
      } 
     }); 
    } 

か、また

constructor() { 
     super(); 
     this.state = { 
      bugs: [], 
     }; 
    this.addbugs = this.addbugs.bind(this); 
    } 

を試してみて、それはあなたがAJAXをバインドしているにもかかわらず

Answer 3

あったように、残りを保つことができる範囲の問題です成功関数をバインドするのを忘れたaddBug関数

あなたはarroそのようにする機能w

class BugList extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      bugs: [], 
     }; 
    } 
    addBug(bug) { 
     $.ajax({ 
      type: 'POST', url: '/api/bugs', contentType: 'application/json', data:JSON.stringify(bug), 
      success: function(data) { 
       var bug = data; 

       var bugsModified = this.state.bugs.concat(bug); 
       this.setState({bugs: bugsModified}); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.log("error adding bug: ", err); 
      } 
     }); 
    } 
    componentDidMount() { 
     $.ajax('/api/bugs').done(function(data) { 
      this.setState({bugs: data}) 
     }.bind(this)); 
    } 
    render() { 
     return(
      <div> 
       <h1>Bug Tracker</h1> 
       <BugFilter /> 
       <hr /> 
       <BugTable bugs={this.state.bugs}/> 
       <hr /> 
       <BugAdd addBug={(data) => this.addBug(data)}/> 
      </div> 
     ); 
    } 
}