React Native Undefined不是Object（评估'this.state.input'） [英] React Native Undefined is not an Object (evaluating 'this.state.input')

问题描述

我正在尝试构建一个单词词典，通过以下本教程。它使用了一个json文件，我相信它包含带有英文单词的键和相应的德语单词作为值。

I am trying to build a word dictionary that translates English words to German words by following this tutorial. It utilize a json file which, I believe, contain keys with English words and its corresponding German words as values.

1. 教程通过使用require语句 var english_german = require（'./ english_german.json'）; 来做到这一点，但我想知道是否有使用import语句的替代方法相反。

1. The tutorial do that by using the require statement var english_german = require('./english_german.json'); but I would like to know if there is an alternative by using the import statement instead.

我面临的主要问题是，我得到的是未定义的不是对象（评估'this.state.input' ）当我在TextInput中输入一个单词并按下回车键时出错。

The main problem I am facing, though, is that I am getting a "Undefined is not an Object (evaluating 'this.state.input')" error when I type in a word in the TextInput and hitting enter.

我的源代码如下：

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});
  }
  
	render() {
		var layout = 
			<View style = { styles.parent }>
				<Text>
					Type something in English:
				</Text>
        <TextInput
          onChangeText={(e) => this.setState({input: e})}
          text = { this.state.input }
          onSubmitEditing = { this.showMeaning }
        />
				<Text style = { styles.germanLabel }>
					It's German equivalent is:
				</Text>
				<Text style = { styles.germanWord }>
          { this.state.output }
				</Text>
			</View>
		;
		return layout;
	}
}

const styles = StyleSheet.create({
	// For the container View
	parent: {
		padding: 16
	},
	// For the Text Label
	germanLabel: {
		marginTop: 20,
		fontWeight: 'bold'
	},
	// For the Text meaning
	germanWord: {
		marginTop: 15,
		fontSize: 30,
		fontStyle: 'italic'
	}
});

AppRegistry.registerComponent('Dictionary', () => Dictionary);

推荐答案

这是一个绑定问题，请在构造函数中添加：

This is a binding problem, add this in your constructor:

this.showMeaning = this.showMeaning.bind(this);

这将确保您的此对象 showMeaning method指的是 Dictionary 组件。或者，您可以在 showMeaning 方法中使用箭头功能，如下所示：

This will ensure that this object in your showMeaning method refers to your Dictionary component. Alternatively, you could use arrow function in your showMeaning method like so:

showMeaning = () => { /* rest of code */ }

箭头函数保留此。因此不需要使用 bind 。

The arrow function preserves the context of this. So the use of bind isn't required.

这篇关于React Native Undefined不是Object（评估'this.state.input'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！