Undefined не является объектом (оценка 'this. State.input')

Я пытаюсь прочитать ключ из файла JSON и отобразить его значение в текстовом поле. Пользователь введет значение ключа в поле TextInput. Ниже приведен код, который я использую. Он выдает ошибку "Undefined не является объектом (оценивая this.state.input")"после ввода текста и нажатия кнопки отправки. Я думаю, что есть некоторая проблема в связывании / передаче значения в функцию showMeaning(). Пожалуйста помоги.

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

2 ответа

Когда вы звоните showMeaning это не связано с правильным контекстом (this). Вы должны связать это или использовать функцию стрелки, которая имеет лексический thisНапример:

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

Как сказал madox2, showMeaning не правильно связан с this, Это сложная проблема с несколькими возможными решениями, плюсы и минусы которых перечислены в этой средней статье. Самым чистым, на мой взгляд, является вариант 5, но он требует использования функций этапа 2.

Другие вопросы по тегам