反应导航 route.params 未定义答案

【问题标题】：React navigaton route.params undefined反应导航 route.params 未定义
【发布时间】：2021-06-18 11:24:43
【问题描述】：

我正在使用 react naviagtion 开发聊天应用程序。有 2 个屏幕：房间列表 - 列出所有可用的聊天室，带有前往给定房间的按钮和房间 - 基本上是聊天窗口。

当尝试通过按钮将参数传递给路由时，我收到错误“无法读取未定义的属性 'roomID'”。我已经按照文档做了所有事情：https://reactnavigation.org/docs/params

我想在进入给定房间时传递此参数（我从查询中获得的 room.id）以进行特定查询。

有人知道为什么它不起作用吗？

这是我的设置：

const Stack = createStackNavigator();

export default function App() {
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home Screen / Room list" component={HomeScreen} />
          <Stack.Screen
            name="Room"
            component={RoomScreen}
            options={{ title: "Room id:" }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </ApolloProvider>
  );
}

function HomeScreen({ navigation }) {
  const { data, loading, error } = useQuery(GET_ROOMS);
  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error :(</Text>;
  });

  return data.usersRooms.rooms.map((room: Room) => (
    <View
      style={{ width: 500, marginLeft: "auto", marginRight: "auto" }}
      key={room.id}
    >
      <View style={styles.roomListItem}>
        <Image
          style={styles.roomPic}
          source={{
            uri:
              room.roomPic !== ""
                ? room.roomPic
                : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png",
          }}
        />
        <View>
          <Text>{room.name}</Text>
          <Button
            title="Go to room"
            onPress={() => {
              navigation.navigate("Room", { roomID: room.id });
              console.log("clicked room id: " + room.id);
            }}
          />
        </View>
      </View>
    </View>
  ));
}

function RoomScreen(route, navigation) {
  const { roomID } = route.params; // Cannot read property 'roomID' of undefined
  //const roomID = "33290044-5232-46be-9302-210f5291905b"; //hardcoded value
  const { data, loading, error } = useQuery(GET_MESSAGES, {
    variables: { roomID: roomID },
  });
//fragment

【问题讨论】：

标签： javascript react-native graphql react-navigation

【解决方案1】：

解决办法：

function RoomScreen(props) {
  const roomID = props.route.params.roomID;

【讨论】：

或function RoomScreen( {route, navigation} ) { ?

【解决方案2】：

函数RoomScreen返回props(object)，里面有params，navigation等props，所以你可以这样使用

function RoomScreen(props) {
  const {roomID} = props.route.params;
  ...
}

或者你可以像这样解构返回的对象

function RoomScreen({route, navigation}) {
  const {roomID} = route.params;
  ...
}

正如您在 HomeScreen 中所做的那样。

【讨论】：