React调用getCurrentPosition报错：需传1个参数但未传参求助

核心问题 #

navigator.geolocation.getCurrentPosition 不是Promise式API，不能直接用await调用。它的语法要求至少传入成功回调函数作为第一个参数，你直接调用没传参数，所以触发了参数不足的错误。

修正方案 #

把getCurrentPosition包装成Promise，这样就能用await处理异步流程；另外，React的setState是异步操作，直接在setLat/setLong后调用fetchWeather可能拿不到最新的经纬度，建议直接把获取到的坐标值传给fetchWeather。

修正后的完整代码 #

import "./App.css";
import { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchLocation();
  }, []);

  // 封装Geolocation为Promise
  function getCurrentPosition() {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });
  }

  async function fetchLocation() {
    try {
      const position = await getCurrentPosition();
      const lat = position.coords.latitude;
      const long = position.coords.longitude;
      // 直接传经纬度给fetchWeather，避免state异步问题
      await fetchWeather(lat, long);
    } catch (err) {
      console.error(err);
      setError("获取位置失败：" + err.message);
      setLoading(false);
    }
  }

  // 修改fetchWeather，接收经纬度参数
  async function fetchWeather(lat, long) {
    try {
      const res = await fetch(
        `${import.meta.env.VITE_WEATHER_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${import.meta.env.VITE_API_KEY}`
      );
      if (!res.ok) {
        throw new Error(`请求失败，状态码：${res.status}`);
      }
      const result = await res.json();
      setData(result);
      setLoading(false);
    } catch (err) {
      console.error(err);
      setError("获取天气数据失败：" + err.message);
      setLoading(false);
    }
  }

  return (
    <>
      <h1>Weather App</h1>
      {loading ? (
        <p>加载中...</p>
      ) : error ? (
        <p>{error}</p>
      ) : data ? (
        <div>
          <p>地点: {data.name}</p>
          <p>温度: {data.main.temp} °C</p>
          <p>湿度: {data.main.humidity} %</p>
          <p>风速: {data.wind.speed} m/s</p>
        </div>
      ) : null}
    </>
  );
}

export default App;

关键修改说明 #

• 新增getCurrentPosition函数，把原生API包装成Promise，适配async/await的异步处理习惯
• fetchLocation中获取到坐标后直接传递给fetchWeather，跳过state更新的异步等待，避免数据延迟
• 完善错误处理逻辑，把位置获取和天气请求的错误都展示在页面上，方便排查问题

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