React Native技术问题：useState值无法传入MapRegion经纬度求解

核心问题分析 #

1. 初始化错误：mapRegion初始化时使用了拼写错误的变量（toDoData1应为todoDatal），且初始状态的经纬度值不合法（数组/undefined），导致MapView直接报错。
2. 状态未同步：mapRegion仅在组件挂载时初始化一次，后续todoDatal/todoData2更新时不会自动触发mapRegion更新。
3. 类型不匹配：Firebase返回的经纬度可能是字符串类型，而MapView要求传入数字类型。

修正后的完整代码 #

import { StyleSheet, Text, View, Dimensions, Button } from 'react-native'
import React, { useEffect, useState } from 'react'
import { ref, onValue } from 'firebase/database'
import { db } from '../firebase'
import MapView, { Marker } from 'react-native-maps';
import * as Loc from 'expo-location';

const Location = ({ route }) => {
  const paramKey = route.params.paramKey1
  console.log(paramKey)
  
  // 用更清晰的命名，同时设置合法的初始数值（避免undefined报错）
  const [currentKey, setCurrentKey] = useState('')
  const [latitude, setLatitude] = useState(1.3483)
  const [longitude, setLongitude] = useState(103.6831)

  // 初始化mapRegion为合法默认值
  const [mapRegion, setMapRegion] = useState({
    latitude: 1.3483,
    longitude: 103.6831,
    latitudeDelta: 0.9,
    longitudeDelta: 0.9,
  })
  
  const [mapRegionNow, setMapRegionNow] = useState({
    latitude: 1.3483,
    longitude: 103.6831,
    latitudeDelta: 0.9,
    longitudeDelta: 0.9,
  })
  
  // 从Firebase获取数据并更新经纬度
  useEffect(() => {
    const starCountRef = ref(db, "food/" + paramKey);
    const unsubscribe = onValue(starCountRef, (snapshot) => {
      const data = snapshot.val()
      if (data) {
        // 将Firebase返回的数值转为Number类型（避免字符串导致的错误）
        const fetchedLat = Number(data.Latitude)
        const fetchedLng = Number(data.Longitude)
        
        console.log("Value from Firebase: " + fetchedLat, fetchedLng)
        
        setCurrentKey(snapshot.key)
        setLatitude(fetchedLat)
        setLongitude(fetchedLng)
      }
    });
    
    userLocation();
    
    // 组件卸载时取消Firebase监听
    return () => unsubscribe()
  }, [paramKey])

  // 监听经纬度变化，同步更新mapRegion
  useEffect(() => {
    setMapRegion({
      ...mapRegion,
      latitude: latitude,
      longitude: longitude,
    })
  }, [latitude, longitude])

  console.log('Latitude = ' + latitude)
  console.log('Longitude = ' + longitude)

  // 补充MapView渲染逻辑
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        region={mapRegion}
      >
        <Marker coordinate={mapRegion} title="Target Location" />
      </MapView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
})

export default Location

关键修正点说明 #

• 变量命名优化：将todoDatal/todoData2改为latitude/longitude，提升代码可读性。
• 合法初始值：给经纬度和mapRegion设置合法的默认坐标，避免组件挂载时出现undefined或数组类型错误。
• 状态同步监听：新增useEffect监听latitude和longitude的变化，一旦更新就同步修改mapRegion，确保MapView能实时获取最新坐标。
• 类型转换：将Firebase返回的经纬度转为Number类型，确保符合MapView的参数要求。
• 清理监听：在useEffect中返回取消Firebase监听的函数，避免内存泄漏。

内容的提问来源于stack exchange，提问作者L.Calvin