Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Question

我是 React Native 和 React Navigation 的新手，我收到了这个错误。

Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

我不明白我的意思，因为我只是在使用已经工作的相同代码，但现在它不工作了。

我正在尝试制作一个后退箭头，让您返回到 MachineList 屏幕。

//doesn't work
const AddMachineDetails = ({route}, props) => {

...

<TouchableOpacity onPress={() => props.navigation.navigate("MachinesList")}>
        <BackArrow />
 </TouchableOpacity>

所以当我按下后退箭头时，它向我发送了这个错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

这是我的导航文件：

import MachinesList from '../components/MachinesList'
import AddMachineDetails from '../components/AddMachineDetails';

...

function MachineListStackScreen() {
    return(
        <Stack.Navigator screenOptions={{headerShown: false}}>
            <Stack.Screen name='MachinesList' component={MachinesList}/>
            <Stack.Screen name='AddMachineDetails' component={AddMachineDetails}/>
        </Stack.Navigator>
    )
}

...

我认为问题出在这段代码的某处，但如果不是，我会向您展示我的更多代码

这是我的 navigation.navigate 完美运行的示例：

//no specific imports  (but works)

const MachinesList = (props) => {

...


<TouchableOpacity style={styles.machineBox} onPress={() => props.navigation.navigate('AddMachineDetails', {item})}>

Answer 1

问题在这里({route}, props) =>。

您正在解构第一个参数，但没有传递其他参数，这就是“props”变量未定义的原因。

你有两个解决方案：

只需使用道具：

const AddMachineDetails = (props) => {

破坏道具：

const AddMachineDetails = ({route, navigation, ...props}) => {
...

<TouchableOpacity onPress={() => navigation.navigate("MachinesListDetails")}>
       <BackArrow />
</TouchableOpacity>

Answer 2

你必须desctruct props 参数。

const AddMachineDetails = ({route, ...props}) => { ... }

或

const AddMachineDetails = ({route, navigation, ...props}) => { ... }  // then straightly use the *navigation*

Answer 3

可选链接在将来可以用于防止运行时错误。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

javascript

reactjs

react-native

react-navigation

react-native-navigation