React Native - 尽管已定义，但 this.state 仍为未定义？答案

【问题标题】：React Native - this.state coming as undefined despite being defined?React Native - 尽管已定义，但 this.state 仍为未定义？
【发布时间】：2021-08-06 21:27:24
【问题描述】：

在用户可以输入标题、姓名和段落以提交故事的应用程序上工作，然后将故事存储在 Firestore 数据库中。然而，尽管我输入了一些文本，但当我按下提交按钮调用 storeData() 时，console.log(firebase.firestore.collection('story')) 仍然显示为“[object Object]” 并且 console.log(this.state) 以“未定义”的形式出现，即使我已经在构造函数中明确定义了它。

import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import firebase from 'firebase';

export default class write extends React.Component {
  constructor() {
    super();
    this.state = {
      title: '',
      author: '',
      story: '',
    };
  }
  storeData() {
    console.log(firebase.firestore.collection('story'));
    console.log(this.state);
    firebase.firestore.collection('story').add({
      Title: this.state.title,
      Author: this.state.author,
      Story: this.state.story,
    });
  }
  render() {
    return (
      <View style={styles.background}>
        <Text style={styles.text}>Write your own story here!</Text>
        <TextInput
          style={styles.text1}
          placeholder="Enter your name"
          onChangeText={(text) => {this.setState({ title: text })}}></TextInput>
        <TextInput
          style={styles.text1}
          placeholder="Give a title to your story"
          onChangeText={(text) => {this.setState({ author: text })}}></TextInput>
        <TextInput
          multiline={true}
          style={styles.text2}
          placeholder="Enter your story here"
          onChangeText={(storytext) => {
            this.setState({ story: storytext });
          }}></TextInput>
        <TouchableOpacity style={styles.button} onPress={this.storeData}>
          <Text>Submit</Text>
        </TouchableOpacity>
      </View>
    );
  }
}```

【问题讨论】：

标签： javascript firebase react-native google-cloud-firestore

【解决方案1】：

您传递给事件处理程序的函数，例如 onPress 会丢失其隐式绑定的“this”上下文，当调用该函数时，this 会设置为未定义。

您有两个选择，您可以使用 bind 方法显式绑定 'this' 的上下文，例如

 <TouchableOpacity style={styles.button} onPress={this.storeData.bind(this)}>
     <Text>Submit</Text>
 </TouchableOpacity>

或者使用箭头函数，将'this'的上下文绑定到函数定义的范围，例如

// Now an arrow function
storeData = () =>  {
    console.log(firebase.firestore.collection('story'));
    console.log(this.state);
    firebase.firestore.collection('story').add({
      Title: this.state.title,
      Author: this.state.author,
      Story: this.state.story,
    });
  }


<TouchableOpacity style={styles.button} onPress={this.storeData}>
     <Text>Submit</Text>
 </TouchableOpacity>

【讨论】：