Question

未捕获的类型错误：无法读取未定义的属性（读取“navigate”）

2022-01-28

10324

javascript reactjs react-native react-navigation react-native-navigation

我是 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

您必须析构 props 参数。

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

或

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

Answer 2

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

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

您有两个解决方案：

只需使用 props：

const AddMachineDetails = (props) => {

解构 props：

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

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