マップ内の匿名関数内のメソッドは定義されていません

Question

この例では、メッセージマップ内でhandleButtonPressをどのように呼び出しますか？

import React, { Component } from 'react'; 
import {View, Text, TouchableOpacity} from 'react-native'; 

export default class MyComponent extends Component { 
    constructor(props){ 
    super(props) 
    this.state = {messages:["THANKS", "MERCI", "GRAZIE"]} 
    this.myFunc = this.myFunc.bind(this) 
    this.handleButtonPress = this.handleButtonPress.bind(this) 
    } 

    render(){ 
    return (
     <View> 
     <Text>{this.state.message}</Text> 

     { 
      this.state.messages.map(function(message, index){ 
      return (
       <TouchableOpacity key={index} onPress={function(){ this.handleButtonPress(message) }.bind(this) }> 
       <Text>Press Me</Text> 
       </TouchableOpacity> 
      ) 
      }) 
     } 

     </View> 
    ) 
    } 

    handleButtonPress(message){ 
    console.log("BUTTON WAS PRESSED WITH MESSAGE: " + message) 
    this.myFunc(message) 
    } 

    myFunc(message){ 
    console.log("MY FUNCTION WAS CALLED") 
    this.setState({message:message}) 
    } 

} 

今すぐ投げているのはundefined is not a function (evaluating 'this.handleButtonPress(message)')です。どうしてこんなことに？

Answer 1

明示的に指示されない限り、Array.prototype.mapはthisというコンテキストにバインドしません。ドキュメントから：thisArgパラメータがmapに提供され

場合、そのこの値として使用するために、呼び出されたときにコールバックに渡されます。それ以外の場合は、値undefinedが渡され、この値として使用されます。あなたがthis値を指定したことがないので

、それはundefinedであり、したがってonPressに匿名関数にバインドされthisをやっundefinedです。 handleButtonPressがundefinedであるため、エラーがスローされます。これは、あなたがmapにthisコンテキストを渡す必要があることを意味し、ドキュメントから：

構文

arr.map(callback[, thisArg])

これには、同じように適用されます。

{ 
    this.state.messages.map(function(message, index){ 
     return (
      <TouchableOpacity key={index} onPress={function(){ this.handleButtonPress(message) }.bind(this) }> 
      <Text>Press Me</Text> 
      </TouchableOpacity> 
     ) 
    }, this) //Notice the `this` here, this is the optional thisArg which is used as the `this` value in the callback. 
} 

thisはクラスですmapに渡されたとき。それはonPressのイベントハンドラ（匿名関数）にバインドされ、正しく呼び出されます。 （注：あなたが今そうであるように、あなたがそれを行う場合は、新しいメソッドは、イベントがトリガされるたびに作成されますので、あなたはおそらく、コンストラクタで一度あなたの方法をバインドする必要があります。）実際に

---

thisArgを渡さないで、の値は通常どおりに決定されます。通常の機能のthisはwindow（厳密なモードではundefined、これはクラスのデフォルトです）ですので、thisはあなたの考えではありません。