React页面刷新后无法正常运行的原因排查求助

我正在学习JavaScript，React、Node.js和npm对我来说都是全新的概念。我跟着教程搭建了一个能获取本地天气的应用，通过npm启动后可在localhost:3000正常访问。修改.js文件（使用Atom编辑器）后，npm编译新代码也能正常运行，但刷新页面后应用就无法显示内容。

查看Chrome控制台发现，编译后能立即获取位置并成功调用OpenWeatherMap API；但刷新页面时，地理位置似乎未成功获取，导致无法返回数据，奇怪的是它会尝试三次，仅第二次成功。

相关截图 #

• 刷新时的控制台：
• 正常运行时的界面：

疑似存在问题的代码片段 #

useEffect(() => {
    const fetchData = async () => {
      navigator.geolocation.getCurrentPosition(function(position) {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });

      await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(result => {
        setData(result)
        console.log(d)                      // (GL)
        console.log("Latitude is:", lat)    // (GL)
        console.log("Longitude is:", long)  // (GL)
        console.log(result);
      });
    }
    fetchData();
  }, [lat,long])

问题原因 #

核心问题是navigator.geolocation.getCurrentPosition是异步执行的，但你没等它完成就直接发起API请求。刷新页面时，初始的lat和long是空值（或初始默认值），这时候调用API会因为参数无效失败。而setLat和setLong触发组件重新渲染，useEffect依赖lat和long，所以会再次执行fetchData——第二次执行时，lat和long已经被赋值，API请求成功，但前两次失败的请求已经导致页面显示异常。另外代码里console.log(d)的d未定义，会额外报错。

修复方案 #

把getCurrentPosition包装成Promise，确保拿到位置数据后再发起API请求：

useEffect(() => {
  const fetchData = async () => {
    // 将getCurrentPosition转为Promise，等待位置获取完成
    const position = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });
    
    const { latitude, longitude } = position.coords;
    setLat(latitude);
    setLong(longitude);

    // 直接用获取到的经纬度发起请求，避开state更新的异步延迟
    const res = await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${latitude}&lon=${longitude}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`);
    const result = await res.json();
    setData(result);
    
    console.log("Latitude is:", latitude);
    console.log("Longitude is:", longitude);
    console.log(result);
  };

  fetchData();
}, []); // 改为空依赖，只在组件挂载时执行一次

修复说明 #

1. 用Promise包装getCurrentPosition，确保位置数据拿到后再执行后续逻辑，避免使用未更新的lat/long发起无效请求。
2. 直接使用获取到的latitude和longitude调用API，不用依赖React state的异步更新。
3. useEffect改为空依赖数组，避免因lat/long更新重复触发请求，减少不必要的API调用。
4. 移除未定义的console.log(d)，消除控制台报错。

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