React组件通过Props传递状态问题：子组件函数无法访问Lat/Long Props

嘿，我之前在做类似的Google Maps集成项目时也碰到过这个坑，给你几个实用的排查和解决方向：

• 监听Props变化，延迟执行Google Maps逻辑
  大概率是你的Google Maps初始化函数在Props还没更新的时候就执行了——比如父组件是异步获取经纬度的，子组件挂载时拿到的是初始的0,0，之后Props更新但函数没重新触发。如果是函数组件，用useEffect监听lat和long的变化，只有当它们不为0时再执行地图初始化和天气API调用：

  import { useEffect } from 'react';
  
  function WeatherMap({ lat, long }) {
    useEffect(() => {
      // 过滤掉初始的0值
      if (lat !== 0 && long !== 0) {
        initGoogleMapWithWeather();
      }
    }, [lat, long]); // 依赖数组确保Props变化时重新执行
  
    const initGoogleMapWithWeather = () => {
      // 初始化Google地图
      const map = new window.google.maps.Map(document.getElementById('weather-map'), {
        center: { lat, lng: long },
        zoom: 10,
      });
      // 在这里调用你的天气API，传入当前的lat和long
      fetchWeatherData(lat, long);
    };
  
    const fetchWeatherData = (lat, lon) => {
      // 天气API请求逻辑
    };
  
    return <div id="weather-map" style={{ width: '100%', height: '400px' }}></div>;
  }
  

• 先确认Props是否真的传对了
  别着急写逻辑，先在子组件里打个日志看看实际拿到的Props：

  console.log('Received props:', lat, long);
  

  检查是不是父组件传参时名称写错了（比如父组件传的是latitude，子组件用的是lat），或者状态更新时有没有把值正确赋给lat和long。

• 避开闭包陷阱
  如果你的Google Maps相关函数定义在组件顶层，可能会因为闭包问题拿到旧的Props值。解决方法是把函数放到useEffect内部，这样每次Props更新时，函数都会重新创建，确保拿到最新的lat和long：

  useEffect(() => {
    if (lat && long) {
      // 把初始化函数放到useEffect里
      const initMap = () => {
        const map = new window.google.maps.Map(document.getElementById('map'), {
          center: { lat, lng: long },
          zoom: 8,
        });
        // 调用天气API
      };
      initMap();
    }
  }, [lat, long]);
  

• 类组件的处理方式
  如果你用的是类组件，就把地图初始化逻辑放到componentDidUpdate里，同时在componentDidMount里做初始判断：

  class WeatherMap extends React.Component {
    componentDidMount() {
      const { lat, long } = this.props;
      if (lat !== 0 && long !== 0) {
        this.initMap();
      }
    }
  
    componentDidUpdate(prevProps) {
      const { lat, long } = this.props;
      // 只有当经纬度变化时才重新初始化
      if (lat !== prevProps.lat || long !== prevProps.long) {
        this.initMap();
      }
    }
  
    initMap() {
      const { lat, long } = this.props;
      const map = new window.google.maps.Map(document.getElementById('map'), {
        center: { lat, lng: long },
        zoom: 10,
      });
      // 天气API调用
    }
  
    render() {
      return <div id="map"></div>;
    }
  }
  

按这些步骤排查下来，应该就能解决经纬度始终是0,0的问题啦！

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