为何useEffect中fetchWeatherData提前执行且API请求达3次？

为什么会提前执行+多次请求？ #

1. 初始状态触发：如果你的坐标初始值是{}或其他非空默认值，useEffect会在组件首次渲染时就执行，此时坐标还没被异步获取到。
2. Strict Mode 双重执行：React开发环境的Strict Mode会重复执行useEffect（用于检测副作用问题），再加上坐标更新后的一次执行，就会出现3次请求。
3. 未做有效性判断：没有在fetchWeatherData执行前检查坐标是否真实有效，导致无效状态下也发起了请求。

正确的实现方式 #

1. 合理设置坐标状态

将坐标初始值设为null或undefined，明确区分“未获取”和“已获取”状态：

const [coords, setCoords] = useState(null);

2. 异步获取坐标的逻辑

单独封装获取坐标的逻辑，确保仅在未获取坐标时执行：

useEffect(() => {
  if (coords) return; // 已获取到坐标就不再执行

  const successHandler = (position) => {
    setCoords({
      lat: position.coords.latitude,
      lon: position.coords.longitude
    });
  };

  const errorHandler = (error) => {
    console.error('获取坐标失败:', error);
  };

  navigator.geolocation.getCurrentPosition(successHandler, errorHandler);
}, [coords]);

3. 仅在坐标有效时发起请求

专门用一个useEffect处理天气数据请求，依赖项设为coords，并在内部判断坐标是否有效：

useEffect(() => {
  // 坐标无效时直接返回，不发起请求
  if (!coords || !coords.lat || !coords.lon) return;

  // 使用AbortController避免竞态条件（比如坐标快速更新时取消旧请求）
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchWeatherData = async () => {
    try {
      const res = await fetch(`https://api.example.com/weather?lat=${coords.lat}&lon=${coords.lon}`, { signal });
      const data = await res.json();
      // 处理天气数据
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('获取天气数据失败:', err);
      }
    }
  };

  fetchWeatherData();

  // 组件卸载或依赖项变化时取消请求
  return () => controller.abort();
}, [coords]);

关键注意点 #

• 依赖项精准控制：确保useEffect的依赖项只包含需要触发更新的变量（这里就是coords），避免不必要的重执行。
• 竞态条件处理：用AbortController可以在组件卸载或坐标更新时取消未完成的请求，防止旧请求覆盖新数据。
• 开发环境Strict Mode：如果是开发环境出现的3次请求，其中两次是Strict Mode的双重执行，生产环境会自动消失，无需额外处理。

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