反応は約束の中で 'this' contextを失う

Question

私は反応が非常に新しく、たぶんばかしい間違いを犯しています。私は約束を返すAxiosでAPI呼び出しをしようとしています。この約束が解決されたら、私はこの結果をコールバックを介して親の状態を更新する関数に渡したいと思います。しかし、私は定義されていないので、「これは」消えているようです。私は、将来解決されるように、もはや「この」文脈は存在しないと思いますか？コールバックを一時的に割り当てて使用することで回避できますが、不器用な感じです。ここでは、コードは次のとおりです。

axios.get(url) 
    .then(function(response) { 
    this.props.handler(response.data.thing) 
    }) 
    .catch(function(error) { 
    console.log(error) 
    }) 

この作品：矢印の機能が入ってくるところ

let handler = this.props.handler 
axios.get(url) 
    .then(function(response) { 
    handler(response.data.word) 
    }) 
    .catch(function(error) { 
    console.log(error) 
    }) 

Answer 1

これは、矢印の機能は基本的に上からthisを維持し、関数内でそれを上書きしません。 MDNで詳しく読むことができます。新しい機能であることを忘れないでください。古いブラウザの中にはサポートしないものがあります。

次のコードは、質問のコードに基づいて矢印関数を使用した例です。

は

axios.get(url) 
    .then((response) => { 
    this.props.handler(response.data.thing) 
    }) 
    .catch((error) => { 
    console.log(error) 
    }) 

編集：ES6構文なしでこれを行うには

他の方法は、関数の外で変数を設定することです。矢印関数がサポートされていない場合でも、質問に入力した他の例は機能します。しかし、次のコードも使用することができます。

var self = this; 
axios.get(url) 
    .then(function (response) { 
    self.props.handler(response.data.thing) 
    }) 
    .catch(function (error) { 
    console.log(error) 
    }) 

これは、あなたが作成した変数（self）を使用して、正しいthisにアクセスできます。もちろん、これに言及されているような欠点は、矢印機能を使用するよりははるかにぎこちなくきれいではないということです。

矢印機能とのブラウザ互換性の詳細については、Can I useを参照してください。あなたがReactを使っているのであれば、ES6の構文を変換してより互換性のあるブラウザにするために、Babelをコンパイラとして使用することができます。