.有人可以告诉我如何修复此错误 ERROR TypeError: undefined 不是对象（评估'userData.username'）

我正在构建一个小应用程序，因此当您登录应用程序并进入主页时，您需要允许获取您的城市名称位置的权限，在前端获取您的城市名称后，它会将您的城市名称发送到后端以保存您的城市名称在数据库中，并且您的城市名称将保存在数据库“城市是一个字符串”中，直到这里一切正常，它将我的城市名称保存到 MongoDB 数据库中

现在我的应用程序中有一个屏幕，所以我希望当用户进入该屏幕时，该用户将获得一个随机的用户用户名和个人资料图片显示在前端注意两个用户在数据库中应该具有相同的城市名称请求服务器的用户应该与数据库中的另一个随机用户具有相同的城市，并且我将两个相同的用户具有相同的城市

主页：

import { StyleSheet, View, StatusBar } from 'react-native'
import React, { useEffect, useState } from 'react'
import Bottomnavbar from '../../Components/Bottomnavbar'
import TopNavbar from '../../Components/TopNavbar'
import FollowersRandomPost from '../../Components/FollowersRandomPost'
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as Location from 'expo-location';

const Mainpage = ({ navigation }) => {
  
  const [userdata, setUserdata] = useState(null);
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [city, setCity] = useState(null);

  useEffect(() => {
    async function getUserData() {
      try {
        const userDataString = await AsyncStorage.getItem('user');
        const userData = JSON.parse(userDataString);
        setUserdata(userData);
      } catch (err) {
        alert(err);
      }
    }

    getUserData();
  }, []);

  useEffect(() => {
    async function getLocation() {
      try {
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          setErrorMsg('Permission to access location was denied');
        }

        let location = await Location.getCurrentPositionAsync({});
        setLocation(location);

        let city = await Location.reverseGeocodeAsync(location.coords);
        setCity(city[0].city);
      } catch (err) {
        console.error(err);
      }
    }

    getLocation();
  }, []);

  useEffect(() => { 
    async function sendCity() {
       try {
        const response = await fetch('http://10.0.2.2:3000/updateCity', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            city: city,
            username: userdata.user.username
          }),
        });
        const data = await response.json();
        console.log('Success:', data);
      } catch (err) 
        console.error('Error:', err);
      }
    }
    if (userdata && city) {
      sendCity();
    }
  }, [userdata, city]);

console.log(city)
  return (
    <View style={styles.container}>
      <StatusBar />
      <TopNavbar navigation={navigation} page={"MainPage"} />
      <Bottomnavbar navigation={navigation} page={"MainPage"} />
      <FollowersRandomPost />
    </View>
  );
}


export default Mainpage

更新城市:

router.post('/updateCity', (req, res) => {

    const city = req.body.city;
    const username = req.body.username;

    console.log(city)

    console.log(`Updating city for user ${username} to ${city}`);

    User.findOneAndUpdate({ username: username }, { city: city }, (err, user) => {
        if (err) {
            return res.status(500).json({
                error: err
            });
        }
        res.status(200).json({
            message: 'City updated successfully'
        });
    });
});

我希望显示用户名和个人资料图片的屏幕:

import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useState, useEffect } from 'react'

const SearchUserPage = () => {
  return (
    <View style={styles.container}>
      <View style={styles.userSection}>
        <View style={styles.imageContainer}>
          <Image
            style={styles.image}
            source={profile pic here}
            resizeMode="contain"
            overflow="hidden"
          />
        </View>
        <Text style={styles.text}>User name here</Text>
      </View>
    </View>
  )
}

export default SearchUserPage

获取一个具有相同城市的随机用户的后端代码:

router.get("/user", async (req, res) => {
    try {
      const city = req.body.city;
  
      console.log(city);
  
      const count = await User.countDocuments({ city: city });
      if (count === 0) {
        return res.status(404).json({ error: "No users found with that city" });
      }
  
      const randomUser = await User.aggregate([
        {
          $match: {
            city: city,
          },
        },
        {
          $sample: {
            size: 1,
          },
        },
        {
          $project: {
            username: 1,
            profilepic: 1,  // Correct field name
          },
        },
      ]);

      console.log(randomUser[0].username)
      console.log(randomUser[0].profilepic)
  
      res.json(randomUser);
    } catch (err) {
      console.log(err);
      res.status(500).json({ error: err });
    }
  });