React - これはコンポーネントへの関数のバインド時には未定義です

Question

私はこのコードを持っています。私はSemantic UIからいくつかのコンポーネントをインポートしました。

import React from 'react' 
import { Card, Image, Grid } from 'semantic-ui-react' 

画像を読み込むときにエラー（404）が表示されたら、関数を呼び出そうとしています。

export default class HotelCards extends React.Component { 
    // constructor 
    constructor(props){ 
    super(props) 
    this.handleError = this.handleError.bind(this); 
    } 
    // state 
    state = {} 

これは私が呼び出すしたい機能です。（私は内部thisを記録した場合、私は現在のクラスのインスタンスを取得する機能をレンダリングしないこと）

handleError() { 
    console.log(this); 
    } 

    render() { 
    if (!this.props.hotels) return null; 
    return (
     <Grid doubling stackable columns="4" className="cards-container"> 
     { 
      this.props.hotels.map(function(e, i) { 
       return (
        <Grid.Column key={i} className="card-column"> 
        <Card> 

この要素から：

     <Image src={e.hotel.image} onError={this.handleError} /> 
        </Card> 
        </Grid.Column> 
       ) 
      }) 
     } 
     </Grid> 
    ); 
    }//render 
}//class 

thisはundefinedです。このため、私のアプローチは、私がきちんとコンポーネントにこの機能をバインドするにはどうすればよい

<img src="image.png" onError="this.onerror=null;this.src='/placeholder.jpg';" /> 

だろうJavaScriptのバニラで

TypeError: this is undefined 
Stack trace: 
render/<@http://localhost:1337/app/bundle.js:63883:92 
... 

？クラスのメソッドとして

Answer 1

私は理由がわかりましたthisはundefinedです。

これらのものは.mapメソッドの内部で起こるので、それがあるので、私はこのようにそれにthisをバインドする必要がありました：矢印の機能を使用することにより、

this.props.hotels.map(function(e, i) { 
... 
}, this) 

または@apenduaとしてコメントのでthisは失われません。

this.props.hotels.map((e, i) => { 
    ... 
    }) 

Answer 2

脂肪の矢印機能はES6でサポートされていない、あなたが最初にこのような方法としてhandErrorを定義する必要があると思いますので：

handleError() { 
    console.log('test'); 
} 

、あなたはそれにバインドすることができるはずです必要であれば、それはこのを使用することができます。

<Image src={e.hotel.image} onError={this.handleError.bind(this} /> 

をあなたの（いくつかのケースでパフォーマンスを持つことができる）機能をレンダリングにバインドを無効にするにはあなたのコンストラクタ関数にバインド行うことができます。

this.handleError = this.handleError.bind(this); 

Answer 3

典型的なアプローチは、いわゆる「遅延バインディング」を使用している、すなわち

constructor() { 
    // ... 
    this.handleError = this.handleError.bind(this); 
} 

handleError() { 
    console.log('THIS', this); 
} 

あなたのコードが機能しなかった理由は、あなたの脂肪の矢ためでしたクラスが定義されているコンテキストにバインドされています。別の回答で提案されているように

また、あなたもそう、レンダリングレベルで結合することができる：

<Image src={e.hotel.image} onError={this.handleError.bind(this)} /> 

しかし、その解決策の問題は、それがあなたのrenderにすべての呼び出しで新しいハンドラ関数を生成することですメソッドを使用します。これは、プロパティの等価性テストの最適化手法を使用している場合、レンダリングのパフォーマンスに悪影響を与える可能性があります（ただし、そうする必要はありません）。

Answer 4

this.stateはコンストラクタの内部コンポーネントです。

Answer 5

@kunok：niceあなたの答えが見つかりました。矢印の機能（=>）はのコンテキストを囲み機能と同じに保ちます。