Ich versuche, ein Wörterbuch zu erstellen, das englische Wörter in deutsche Wörter übersetzt, indem Sie this tutorial folgen. Es verwendet eine JSON-Datei, die, glaube ich, Schlüssel mit englischen Wörtern und den entsprechenden deutschen Wörtern als Werte enthält.React Native Undefined ist kein Objekt (Bewertung 'this.state.input')
Das Tutorial zu tun, dass durch die Verwendung erfordern die Aussage
var english_german = require('./english_german.json');aber ich würde gerne wissen, ob es eine Alternative gibt stattdessen die Import-Anweisung unter Verwendung.Das Hauptproblem, mit dem ich konfrontiert bin, ist, dass ich einen Fehler "Undefined ist kein Objekt (Bewertung 'this.state.input')" bekomme, wenn ich ein Wort in das TextInput eintippe und die Eingabetaste drücke .
Mein Quellcode ist wie folgt:
import React, { Component } from 'react';
import {
AppRegistry,
Image,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
var english_german = require('./english_german.json');
class Dictionary extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
output: ''
}
}
showMeaning() {
// Use the ternary operator to check if the word
// exists in the dictionary.
var meaning = this.state.input in english_german ?
english_german[this.state.input] :
"Not Found";
// Update the state
this.setState({output: meaning});
}
\t render() {
\t \t var layout =
\t \t \t <View style = { styles.parent }>
\t \t \t \t <Text>
\t \t \t \t \t Type something in English:
\t \t \t \t </Text>
<TextInput
onChangeText={(e) => this.setState({input: e})}
text = { this.state.input }
onSubmitEditing = { this.showMeaning }
/>
\t \t \t \t <Text style = { styles.germanLabel }>
\t \t \t \t \t It's German equivalent is:
\t \t \t \t </Text>
\t \t \t \t <Text style = { styles.germanWord }>
{ this.state.output }
\t \t \t \t </Text>
\t \t \t </View>
\t \t ;
\t \t return layout;
\t }
}
const styles = StyleSheet.create({
\t // For the container View
\t parent: {
\t \t padding: 16
\t },
\t // For the Text Label
\t germanLabel: {
\t \t marginTop: 20,
\t \t fontWeight: 'bold'
\t },
\t // For the Text meaning
\t germanWord: {
\t \t marginTop: 15,
\t \t fontSize: 30,
\t \t fontStyle: 'italic'
\t }
});
AppRegistry.registerComponent('Dictionary',() => Dictionary);
Sie können auch automatisch mithilfe der Pfeilsyntax binden: 'showMeaning =() => {// Methode hier}' –
@AndrewBreen Ohne die Bindung, was bedeutet 'das'? – Benjamin
Es hängt davon ab, es könnte sich auf andere Komponenten beziehen, aber um sicher zu sein, es ist besser zu console.log es. –