Reactネイティブ未定義関数

Question

これはReact Nativeでどのように動作するかを理解しようとしています。私はthis.f（）を使用するときにthrowし、エラーが発生しますが、私がf（）を使用するだけでは、それはありません。なぜ私は分からない。

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

class Home extends Component { 
    state = { 
     myState: 'a' 
    } 

    updateState =() => this.setState({ myState: 'The state is updated' }) 
    render() { 
    a = 37; 
    function f() { 
     return this.a; 
    } 
    //var f = this.f; 
     return (
     <View style = {styles.container}> 
      <Text onPress = {this.updateState}> 
       {this.state.myState} 
      </Text> 
       <Text> {this.f()} </Text> 
     </View> 
    ); 
    } 
} 
const styles = StyleSheet.create({ 
    container: { 
     paddingHorizontal: 30, 
     paddingVertical: 30, 
     alignItems: 'center' 
    } 
}) 
export default Home; 

Answer 1

あなたrender()機能でthisキーワードがHomeインスタンスへの参照です。 Homeのprototypeにはfというプロパティがありませんので、undefinedを呼び出すとエラーが発生します。

あなたが宣言された関数f()が（間違いなく行うには悪いことですが、それは別のトピックだ）render()関数内でスコープされ、およびstrictモードであればthisは、グローバルな文脈に、または未定義にバインドされます。 More here。