TypeError: route is undefined and undefined is not an object (evaluating 'route.params')

Question

我收到 TypeError: undefined is not an object (evaluating 'route.params') 当从我的登录组件传递 props 到通知组件时

这里是Login.js

export const Login = ({navigation}) => {
  const [username, onChangeUsername] = React.useState("");
  const [password, onChangePassword] = React.useState("");

  return (
    <View style={styles.container}>
      <View style={styles.card}>
      <Text style={{marginBottom:20}}>Login using your credentials</Text>
        <TextInput
          style={[styles.input,styles.shadowProp]}
          onChangeText={onChangeUsername}
          placeholder='Email'
        />
        <TextInput
          style={[styles.input,styles.shadowProp]}
          onChangeText={onChangePassword}
          placeholder='Password'
        />
        <Button
        title="Log In"
        style={styles.button}
        color= '#5e72e4'
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Notify', {
            itemId: 85,
            otherParam: 'anything you want here',
          }); }}
      />
      </View>
    </View>
  );
}

这是Notify.js

export const Notify = ({ route, navigation }) => {
    const { itemId } = route.params;
    const { otherParam } = route.params;
    console.log(route); // Gives me undefined
    console.log(route.params) // gives me undefined is not an object

有人能帮忙吗？

这是附件snack.io link。

Answer 1

app.js应该是

const NotifyScreen = ({navigation, route}) => {
  //console.log(decoded);
  return (
    <Notify navigation={navigation} route={route} />
  )
}

因为navigation和route都传进去了，然后你就可以把这两个传入notify组件了。你目前的情况，路线丢失了，因为它不在导航属性.

通知看起来像这样

export const Notify = ({ navigation, route }) => {

在解构属性之前测试哪些属性将进入您的组件，以确保您收到您认为的内容。为此，我建议 console.logging 来自路由器本身的道具，或者当然是查看文档。

Answer 2

您编写了多余的无用代码。您可以直接在导航屏幕组件上传递 Login 和 Notify 屏幕。您不需要创建额外的功能。因此，首先在导航组件中传递您的屏幕，如下所示：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { Login } from './screens/Login';
import { Notify } from './screens/Notify';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Notify" component={Notify} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如您所见，您可以直接在导航屏幕的组件上传递屏幕，这样您就可以访问屏幕中的 navigation 和 route 属性。

现在，您的代码将运行不通过额外的导航属性。

TypeError: route is undefined and undefined is not an object (evaluating 'route.params')

TypeError: route is undefined and undefined is not an object (evaluating 'route.params')

javascript

reactjs

react-native

react-native-navigation