Question

类型错误：路由未定义且未定义不是一个对象（评估“route.params”）

2021-08-20

2373

javascript reactjs react-native react-native-navigation

当我将 props 从我的登录组件传递到通知组件时，我得到了 TypeError: undefined 不是对象（评估'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} />
  )
}

因为导航和路线都已传递到其中，然后您可以将两者传递到通知组件中。您目前的情况是，路线丢失了，因为它不在导航属性上。

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

现在，您的代码将运行而无需传递额外的导航属性。