开发者问题收集

TypeError:未定义不是一个对象(评估'_route$params.lat')

2021-02-21
1140

我有 React Native 应用程序,它有两个屏幕,因此在第一个屏幕中,用户将导航到另一个屏幕,在该屏幕中将获得三个值,单击按钮时,我再次将这些值传递给第一个屏幕,在第二个屏幕中,我使用类似以下方法传递参数:

<TouchableOpacity style={styles.touch} onPress={() => this.props.navigation.navigate("dashboard", { lat: this.state.latitude, long:this.state.longitude, alt: this.state.altitude})}>

但是我在第一个屏幕中收到此错误 TypeError: undefined is not an object (evaluating '_route$params.lat') ,我理解这些值为空,因为我必须导航到第二个屏幕,当从第二个屏幕导航到第一个屏幕时将传递这些值。我该如何修复?

我已经按照 文档 一步一步操作,并在第一个屏幕中执行以下操作

const app = ({ route, navigation }) => {
    const { lat } = route.params;
    const { long } = route.params;
    const { alt } = route.params;

请注意,第二个屏幕是类组件,第一个屏幕是函数组件 以下是卡住的

    <RootStack.Navigator>
               //this first screen
                <RootStack.Screen
                    name="dashboard"
                    component={app}
                    options={{ headerShown: false }}
                />
//second screen
                <RootStack.Screen
                    name="location"
                    component={location}
                    options={{
    
                        title: 'Verify your location',
                    }}
                />
            </RootStack.Navigator>
1个回答

您在此处执行的操作与正常的参数传递不同。 您在此处尝试将参数传递到上一个屏幕。

显示错误是因为第一次加载屏幕时不会有任何参数,因此它是未定义的,但是当您转到下一个屏幕并传递参数并导航时,参数将在那里。因此,您必须采取的解决方法是验证参数。

您可以像下面这样操作,如果存在参数,则会将值设置为 lat。

const lat = route.params?.lat;

还要确保您检查并使用 lat 的值,因为它第一次是未定义的。

您可以在此处查看有关将参数传递给上一个屏幕的文档,useEffect 钩子可用于检查参数是否已更新并对其采取行动。 https://reactnavigation.org/docs/params/#passing-params-to-a-previous-screen

Guruparan Giritharan
2021-02-21