Question

我正在尝试建立一个单词词典，通过跟随this tutorial将英语单词翻译成德语单词。它使用了一个json文件，我相信它包含带有英文单词的键和相应的德语单词作为值。

本教程通过使用require语句var english_german = require('./english_german.json');来做到这一点，但我想知道是否有替代方法，而是使用import语句。
我面临的主要问题是，当我在TextInput中输入一个单词并点击时，我得到一个“未定义不是一个对象（评估'this.state.input'）”错误输入

我的源代码如下：

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);

Answer 1

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

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

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

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

箭头功能保留this的上下文。因此，不需要使用bind。

Answer 2

这是因为您指的是this内的showMeaning。将此功能绑定到this内的constructor，如this.showMeaning = this.showMeaning.bind(this)。

我强烈建议您阅读React的基础知识。例如，这里是您的问题的文档：https://facebook.github.io/react/docs/handling-events.html

React Native Undefined不是Object（评估'this.state.input'）

2 个答案: