"Неопределенный не является объектом" при попытке доступа к состоянию в react native

Question

Итак, в основном у меня есть форма ввода «Vin Number» здесь

   <InputX
                label="Vin Number"
                style={{backgroundColor: '#fafafa'}}
                autoCapitalize="none"
                returnKeyType={'next'}
                key="uemail"
                onChangeText={text => this.setState({currentTypedVin: text})}
              />

, и я использую

onChangeText={text => this.setState({currentTypedVin: text})}

, чтобы установить состояние currentTypedVin на текст, который добавляется во ввод. Затем я пытаюсь получить доступ к этому состоянию в функции GetReport здесь

let vinNumb = this.state.currentTypedVin;

Однако по какой-то причине я получаю сообщение об ошибке «Undefined не является объектом (оценка this.state.currentTypedVin "и я не совсем уверен, почему я все еще пытаюсь заблокировать все это состояние. Любая помощь будет принята с благодарностью <3 </p>

Ниже приведен полный код, но я хотел выделить части импорта выше

import React, {useEffect, Component} from 'react';

import {View, Text} from 'react-native';
import firebase from '@react-native-firebase/app';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
import {Section, Container, InputX, ButtonX} from '../../Components';

class HomePageContent extends Component {
  state = {
    uData: [],
  };
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        var userID = firebase.auth().currentUser.uid;
        const db = firebase.firestore();

        let userDB = db.collection('Users').doc(userID);
        userDB
          .get()
          .then(doc => {
            if (!doc.exists) {
              console.log('No such document!');
            } else {
              let allUsers = [];
              let data = doc.data();
              let currentUser = data.fName;
              let currentTokens = data.tokens;
              allUsers.push({
                currentUser,
              });
              this.setState({uData: allUsers});
            }
          })
          .catch(err => {
            console.log('Error getting document', err);
          });
      } else {
        // No user is signed in.
      }
    });
  }
  render() {
    return (
      <View key="usdd" style={{alignItems: 'center'}}>
        {this.state.uData.map((value, index) => (
          <Section key="ussdf">
            <Container key="udf">
              <Text key="usddfsdf" style={{fontSize: 25}}>
                Welcome {value.currentUser}!
              </Text>
              <Text key="usddfsdf" style={{fontSize: 25, textAlign: 'center'}}>
                Begin Searching Below
                {'\n'}
                {'\n'}
              </Text>

              <InputX
                label="Vin Number"
                style={{backgroundColor: '#fafafa'}}
                autoCapitalize="none"
                returnKeyType={'next'}
                key="uemail"
                onChangeText={text => this.setState({currentTypedVin: text})}
              />
              <ButtonX
                dark={true}
                color={'#3990FF'}
                label={'Request Report'}
                onPress={GetReport}
                key="savebut"
              />
            </Container>
          </Section>
        ))}
      </View>
    );
  }
}

function GetReport() {
  let data = null;
  let vinNumb = this.state.currentTypedVin;

  let xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener('readystatechange', function() {
    if (this.readyState === this.DONE) {
      const db = firebase.firestore();
      let user = firebase.auth().currentUser.uid;
      let cityRef = db.collection('Users').doc(user);

      let setWithOptions = cityRef.update({
        Reports: firebase.firestore.FieldValue.arrayUnion(
          JSON.stringify({
            VinReport: this.responseText,
          }),
        ),
        //....
      });
    }
  });

  xhr.open(
    'GET',
    'https://vindecoder.p.rapidapi.com/decode_vin?vin=' + vinNumb,
  );
  xhr.setRequestHeader('x-rapidapi-host', 'vindecoder.p.rapidapi.com');
  xhr.setRequestHeader('x-rapidapi-key', 'REMOVED');

  xhr.send(data);
}

export default HomePageContent;

Answer 1

Потому что ваша функция GetReport находится вне области действия класса React. Вы можете взять функцию в класс

Например

class HomePageContent extends Component {
  ...your implementation


  GetReport = () => {
    let data = null;
    let vinNumb = this.state.currentTypedVin;
    ...your implementation
  }

  render() {
    return (
    ...your implementation...
              <ButtonX
                dark={true}
                color={'#3990FF'}
                label={'Request Report'}
                onPress={this.GetReport}
                key="savebut"
              />
    ...your implementation...
    );
  }
}

export default HomePageContent;