React Native Expo报错TypeError及城市值为空问题求助

1. 解决 TypeError: null is not an object (evaluating 'userdata.user') #

这个错误是因为你在 userdata 为 null 的时候直接访问了 .user 属性，大概率是登录后跳转Mainpage时，用户数据未完成加载、存储读取失败或传递环节出了问题。

• 紧急修复：添加空值校验
  用可选链操作符直接避免报错，把所有 userdata.user 的写法改成 userdata?.user，当 userdata 为 null/undefined 时会返回 undefined 而非抛出错误。
  如果需要渲染内容，配合条件判断做兜底：

  // 示例：渲染用户信息时的处理
  {userdata ? (
    <Text>{userdata.user.nickname}</Text>
  ) : (
    <ActivityIndicator size="small" />
  )}
  

• 根因排查与修复

  • 如果是通过导航参数传递用户数据：确认登录页跳转时有没有正确传入 userdata，比如：

    // 登录页跳转代码示例，确保fetchedUser是有效数据
    navigation.navigate('Mainpage', { userdata: fetchedUser })
    

  • 如果是从本地存储（AsyncStorage/MMKV）读取：确保读取操作完成后再渲染页面，用状态管理配合异步逻辑：

    const [userdata, setUserdata] = useState(null);
    
    useEffect(() => {
      const loadUser = async () => {
        const savedUser = await AsyncStorage.getItem('user');
        if (savedUser) setUserdata(JSON.parse(savedUser));
      };
      loadUser();
    }, []);
    

  • 给 userdata 设置初始默认值：比如把 useState(null) 改成 useState({})，避免初始状态为 null。

2. 解决 city 值偶尔为空的问题 #

city 时有时无，通常是异步加载（接口/地理位置）未处理好，或者数据传递/存储时丢失。

• 异步数据加载处理
  如果是从接口获取城市数据，必须处理加载状态和异常情况：

  const [city, setCity] = useState('');
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchCity = async () => {
      try {
        const res = await fetch('/api/user/location');
        const data = await res.json();
        // 兜底处理，避免接口返回null/undefined
        setCity(data.city || '未知城市');
      } catch (err) {
        console.error('获取城市失败:', err);
        setCity('未知城市');
      } finally {
        setLoading(false);
      }
    };
    fetchCity();
  }, []);
  
  // 渲染时先显示加载状态
  {loading ? <ActivityIndicator /> : <Text>{city}</Text>}
  

• 数据传递/存储校验
  如果 city 是通过导航参数传递的，接收时做兜底：

  const { route } = useNavigation();
  const city = route.params?.city || '未知城市';
  

• 地理位置服务兼容处理（如果是定位获取城市）
  用 Expo Location 时必须处理权限和定位失败的情况：

  import * as Location from 'expo-location';
  
  const getCurrentCity = async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setCity('权限未获取');
      return;
    }
    try {
      const location = await Location.getCurrentPositionAsync({});
      const reverseGeocode = await Location.reverseGeocodeAsync(location.coords);
      if (reverseGeocode.length > 0) {
        // 优先取city，没有则用region兜底
        setCity(reverseGeocode[0].city || reverseGeocode[0].region || '未知城市');
      } else {
        setCity('无法获取城市');
      }
    } catch (err) {
      console.error('定位失败:', err);
      setCity('未知城市');
    }
  };
  

内容的提问来源于stack exchange，提问作者user20952626