TypeError: undefined is not an object (evalating 'navigation.navigate') React Native

Question

当我按下按钮时，我需要导航到主屏幕。 但我得到一个错误=> TypeError: undefined is not an object (evaluating 'navigation.navigate')

我的代码

import React, { Component, useEffect  } from 'react'    
import { Card } from 'react-native-elements'         
import AsyncStorage from '@react-native-async-storage/async-storage';
import screenStyles from './ScreenStyles';
import HomeHeader from '../components/HomeHeader';
import TicketCardList from '../components/TicketCardList';
import DisableModal from '../components/disableModal';
import { Camera } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import {API_URL, API_TOKEN, API_URL2} from "@env"
import ClearLocalStorage from '../config/clearLocalStorage';

export default class CreateTroubleT extends Component {

    constructor(){
        super();
    }

    
    cancelButtonPress =() => {
        this.props.navigation.navigate('HomeBottomBar');
        console.log("OK")
    }


    render() {

        return (                            
                            
                        <TouchableOpacity style={styles.cancelJBDesing} onPress={()=> this.cancelButtonPress()}>
                        </TouchableOpacity>  
        )
    }
}

当我按下取消按钮时，我得到了错误。我是 Native 新手，非常感谢任何建议

Answer 1

问题是因为当你按下按钮时，你说你要调用cancelButtonPress，没有参数，如下所示

onPress={()=> this.cancelButtonPress()}

但是当你定义cancelButtonPress时，它是一个需要如下所示参数的函数

cancelButtonPress (navigation) {
    navigation.navigate('HomeBottomBar')
    console.log("OK")
}

自从你在没有传递参数的情况下调用cancelButtonPress 时，navigation 就是undefined，这就是navigation.navigate 向你抛出这个错误的原因。

解决方案：

实际上你不应该在按下cancelButtonPress 时传递参数，因为navigation 不是你应该通过函数调用传递的东西。相反，您应该更新您的cancelButtonPress 函数，如下所示

cancelButtonPress = () => {
  this.props.navigation.navigate('HomeBottomBar');
  console.log("ok");
}

假设您已正确设置react-navigation，则应该可以通过this.props.navigation 访问它

Answer 2

您似乎没有为函数提供任何参数（因此导航的值确实是undefined）。为什么不向cancelButtonPress 函数提供事件e 并尝试console.log navigation 的值？

你最终会得到类似的东西：

<TouchableOpacity style={styles.cancelJBDesing} onPress={e=> this.cancelButtonPress(e)}> （当涉及到你的 JSX）。

cancelButtonPress (navigation) {
    console.log(navigation);
    navigation.navigate('HomeBottomBar');
    console.log("OK");
}

（当涉及到功能时）。

这样的事情将允许您拥有一个与undefined 不同的navigation 对象。

如果你不想让自己过于复杂，你应该重构你的cancelButtonPress，以便它正确实现navigation.navigate。

你会得到这样的结果：

cancelButtonPress () {
   console.log("OK");
   this.props.navigation.navigate("/pathToHome");
}

在这种情况下，您不需要捕获 e 事件，因为您实际上不需要向函数提供任何参数来获得预期的行为。