Undefined ist kein Objekt (Bewertung 'this. State.input')

Question

Ich versuche, den Schlüssel aus einer JSON-Datei zu lesen und seinen Wert in einem Textfeld anzuzeigen. Der Benutzer gibt den Schlüsselwert in das Feld TextInput ein. Folgendes ist der Code, den ich verwende. Es wirft "Undefined ist kein Objekt (Bewertung von 'this.state.input')" Fehler nach Eingabe des Textes und Drücken der Schaltfläche "Senden". Ich denke, es gibt ein Problem beim Binden/Übergeben des Wertes an die showMeaning() -Funktion. Bitte helfen Sie.

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

var english_german = 'english_german.json'; 
class Dictionary extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     input: '', 
     output: '' 
    }; 
    } 

    showMeaning() { 
    var meaning = this.state.input in english_german ? english_german[this.state.input] : "Not Found"; 
    this.setState({ 
     output: meaning 
    }); 
    } 

    render() { 
    return (
     <View style={styles.parent}> 
     <Text> 
      Type something in English: 
     </Text> 
     <TextInput value={this.state.input} 
      onChangeText={(input) => this.setState({ input }) } 
      onSubmitEditing = {this.showMeaning} 
      /> 
     <Text style={styles.germanLabel}> 
      Its German equivalent is: 
     </Text> 
     <Text style={styles.germanWord}> 
      {this.state.output} 
     </Text> 
     </View> 
    ); 
    } 
}; 

var styles = StyleSheet.create({ 
    parent: { 
    padding: 16 
    }, 
    germanLabel: { 
    marginTop: 20, 
    fontWeight: 'bold' 
    }, 
    germanWord: { 
    marginTop: 15, 
    fontSize: 30, 
    fontStyle: 'italic' 
    } 
}); 

AppRegistry.registerComponent('Dictionary', function() { 
    return Dictionary; 
}) 

Answer 1

Wenn Sie anrufen showMeaning ist es nicht auf den richtigen Kontext (this) gebunden. Sie sollten es Pfeil Funktion bind oder verwenden, die lexikalische this hat, z.B .:

onSubmitEditing = {() => this.showMeaning()} 

Answer 2

Wie madox2 gesagt wird showMeaning nicht korrekt an this gebunden. Dies ist ein heikles Thema mit mehreren möglichen Lösungen, deren Vor- und Nachteile in this medium post aufgeführt sind. Der sauberste ist meiner Meinung nach Option 5, aber das erfordert die Verwendung von Stufe-2-Funktionen.