Undefined не является объектом (оценивается как this.props.navigation.navigate)

Question

то, что я пытаюсь сделать, это сделать пользовательскую кнопку возврата Android, поэтому, когда я нахожусь на экране, когда я нажимаю кнопку возврата, экран должен перемещаться по MyProducts, но я получаю эта ошибка

import React, { Component } from 'react';
import { View, StyleSheet, Text, Keyboard, Animated } from 'react-native';
import { Textarea, Form, Item, Input, Label, Button } from 'native-base';
import jwt_decode from 'jwt-decode';

class CreateProduct extends Component {
  constructor(props) {
    super(props);
    this.keyboardHeight = new Animated.Value(0);
    this.imageHeight = new Animated.Value(199);

    this.state = {
      isButtonsHidden: false,
      title: null,
      description: '',
      isDialogVisible: false,
      messageError: '',
    };
  }

  registerProduct = () => {
    const { state } = this.props.navigation;
    const token = state.params ? state.params.token : undefined;
    const user = jwt_decode(token);

    fetch(createProductPath, {
      method: 'POST',
      body: formData,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((response) => {
      return response.json();
    })
    .then((responseJson) => {
      if (responseJson.error != null) {
        this.setState({ messageError: responseJson.error })
        this.setState({ isDialogVisible: true })
      }
      else {
        this.props.navigation.navigate('MyProducts', { token: token });
      }
    })
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

  handleBackButton() {
    this.props.navigation.navigate('MyProducts', { token: token });
    return true;
  }

  render() {
    const { state } = this.props.navigation;
    var token = state.params ? state.params.token : undefined;

    return (
      <Animated.View
        style={[styles.container, { paddingBottom: this.keyboardHeight }]}
      >
        <Form style={styles.description}>
          <Item floatingLabel>
            <Label>Title</Label>
            <Input
              onChangeText={(title) => { this.setState({ title }) }}
            />
          </Item>
          <Textarea
            onChangeText={(description) => { this.setState({ description }) }}
          />
        </Form>
        <ToogleView hide={this.state.isButtonsHidden}>
          <View style={styles.buttonContainer}>
            <Button
              onPress={() => { this.props.navigation.navigate('MyProducts', { token: token }); }}
              danger
            >
              <Text style={{ color: 'white' }}> CANCEL </Text>
            </Button>
            <Button
              onPress={this.registerProduct}
              success
            >
              <Text style={{ color: 'white' }}> SAVE </Text>
            </Button>
          </View>
        </ToogleView>
      </Animated.View>
    );
  }
}
export default CreateProduct;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1
  },
  description: {
    flex: 1,
    height: '35%',
    width: '95%',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingBottom: 10,
  },
});

По неизвестным мне причинам мой реквизит не определен, когда я увидел его с console.log, поэтому я не могу пройти через

handleBackButton() { this.props.navigation.navigate('MyProducts', { token: token }); }

Есть ли хороший способ сделать это?Я ценю.

Answer 1

Можете ли вы попробовать изменить ваши вызовы на handleBackButton , чтобы привязать к это ?

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this));
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton.bind(this));
  }

  handleBackButton() {
    this.props.navigation.navigate('MyProducts', { token: token });
    return true;
  }

Answer 2

Сделать handleBackButton функционировать как функция стрелки

handleBackButton = () => {
   this.props.navigation.navigate('MyProducts', { token: token });
   return true
 }