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

Question

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

这是 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 链接。

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来自路由器本身的 props，当然也可以查看文档。

Answer 2

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

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属性。

现在，您的代码将在不传递额外导航属性的情况下运行。