为什么 route.params 在本机中使用反应导航时在组件内部给我未定义？

Question

请不要将此问题标记为重复。其他答案不保存这个。

我现在正在尝试获取 route.params 内部的 React Native 组件并将其呈现在屏幕上

我现在正在尝试把它放在零食上。

问题是当我 console.log route.params 在组件的开头 console.log 向我显示参数时。

但是当我 console.log route.params.mathNumber 时 console.log 显示 undefined.

这是图片

因为我确定我传递了正确的参数 mathNumber 这里的问题是什么？

这是我正在使用的代码

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate('Details', {
            params: {
              mathNumber: Math.floor(Math.random() * 999),
            },
          })
        }
      />
    </View>
  );
}

function DetailsScreen({ navigation, route }) {
  const { mathNumber } = route.params;
  console.log(route.params)
  console.log(route.params.mathNumber);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen {mathNumber} here</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            params: {
              mathNumber: Math.floor(Math.random() * 999),
            },
          })
        }
      />
    </View>
  );
}

对于ez测试用例你可以去吃这个小吃link

Link To Snack

并用我的代码替换 2 组件

如您所见，当我浏览不同的详细信息屏幕时，我正在尝试呈现不同的 mathNumber

Answer 1

你添加参数的方式你会得到这样的 mathNumber

const  mathNumber  = route.params?.params.mathNumber;

或者你也可以

 onPress={() =>
          navigation.navigate('Details', {
              mathNumber: Math.floor(Math.random() * 999),
          })
        }

为什么 route.params 在本机中使用反应导航时在组件内部给我未定义？

Why route.params is giving me undefined inside the component when using react navigation in react native?

reactjs

react-native

react-navigation