React - Reactコンポーネントの変数を使用しているエラー

Question

私はReactを学んでいるので、私と穏やかで、私は新人です。

import React from 'react'; 
import HttpHandler from './../services/HttpHandler'; 
import Podcast from './Podcast/Podcast'; 

class Master extends React.Component{ 
    constructor(){ 
     super(); 
     this.api = new HttpHandler(); 
     this.podList = this.api.getAllPodcasts(); 
     this.http = ""; 
     this.api.getHttpResponse(function(responseData){ 
      var datos = responseData; 
      this.http = datos; 
     }, function(error){ 
      this.http = error; 
     }); 
    } 

    render(){ 
     return (
      <div> 
       <h1>Master</h1> 
       <ul> 
        {this.podList.map((podcast) => <li>{podcast}</li>)} 
       </ul> 
       <p>API Response: {this.http}</p> 
      </div> 
     ); 
    } 
} 
// ======================================== 

export default Master; 

このコンポーネントが使用するのHttpHandler起動とクラッドのXMLHttpRequest GET：私は、このコンポーネントを持っています。応答がうまくいったら、コールバック関数を実行し、応答を処理しようとするとき以外はすべて完璧です。this.httpは未定義で、TypeError: undefined is not an object (evaluating 'this.http = datos')があります。私は悪い変数宣言を持っていることは明らかですが、それは実現する方法でしょうか？

Answer 1

REST要求への応答を表す場合は、Reactの状態をユーザーに提示する必要があります。これを行う最善の方法はcomponentDidMountです。あなたはcomponentDidMountでhttpリクエストになるだろう、そして、

constructor(){ 
    super(); 
    this.state={ 
     http: "", 
    } 
} 

：あなたのコンストラクタは次のようなものでなければなりません

componentDidMount(){ 
    let api = new HttpHandler(); 
    let podList = api.getAllPodcasts(); 
    let http = "" 
    var that = this; 
    api.getHttpResponse(responseData =>{ 
     let datos = responseData; 
     that.setState({ 
      http: datos, 
     }); 
    }, function(error){ 
     that.setState({ 
      http: error, 
     }); 
    }); 
} 

最後に、あなたのrenderメソッドでは、あなたは状態の属性のhttpアクセス：

を

<p>API Response: {this.state.http}</p> 

これはReactで行う方法です。最初のレンダリングでは、httpが空になり、componentDidMountに更新され、setStateが自動的に再レン​​ダリングをトリガーします。

Answer 2

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

TL; DR、問題：

const _this = this 
this.api.getHttpResponse(function(){ 
    this === _this // false 
}); 

任意溶液

1. 高い範囲で_thisにこれを割り当て、コールバック内で使用

2. コールバック（ES5）

   var _this = this 
   this.api.getHttpResponse(function(){ 
       this === _this // true 
   }.bind(this))`