React自定义Hook调用报错与初始API请求优化问题

问题根源 #

你遇到的两个问题本质是：

• "Invalid hook call"：违反了React Hooks核心规则——Hooks必须在函数组件的顶层作用域调用，不能嵌套在useEffect、条件判断或其他函数内部。
• 初始API调用：原自定义Hook未设置触发条件，组件加载时直接执行了请求逻辑。

1. 重构自定义Hook，控制请求时机 #

修改useConvertZipCode Hook，让它接收邮编作为参数，内部通过useEffect监听邮编变化，仅当邮编非空时才发起请求。这样既符合Hooks规则，又能阻止初始无效调用。

import { useState, useEffect } from 'react';

// 重构后的自定义Hook
function useConvertZipCode(zipCode) {
  const [coords, setCoords] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // 初始无邮编时直接返回，不发起请求
    if (!zipCode.trim()) {
      setCoords(null);
      setError(null);
      return;
    }

    const fetchCoordinates = async () => {
      setIsLoading(true);
      setError(null);
      try {
        // 替换为你的OpenWeather API密钥和接口地址
        const response = await fetch(
          `https://api.openweathermap.org/geo/1.0/zip?zip=${zipCode}&appid=YOUR_API_KEY`
        );
        if (!response.ok) throw new Error('无效的邮编或请求失败');
        
        const data = await response.json();
        setCoords({ lat: data.lat, lon: data.lon });
      } catch (err) {
        setError(err.message);
        setCoords(null);
      } finally {
        setIsLoading(false);
      }
    };

    fetchCoordinates();
  }, [zipCode]); // 仅当zipCode变化时重新执行请求逻辑

  return { coords, error, isLoading };
}

2. 在App组件中正确调用Hook #

在组件顶层调用重构后的Hook，传递用户输入的邮编状态。初始时邮编为空，Hook不会发起请求；当用户输入有效邮编后，自动触发请求。

import { useState } from 'react';
import useConvertZipCode from './useConvertZipCode';

function App() {
  const [zipCode, setZipCode] = useState('');
  const { coords, error, isLoading } = useConvertZipCode(zipCode);

  // 后续可使用coords调用天气API获取天气预报
  // ...

  return (
    <div className="weather-app">
      <input
        type="text"
        value={zipCode}
        onChange={(e) => setZipCode(e.target.value)}
        placeholder="输入邮编查询天气"
        maxLength={5} // 假设是美国邮编格式，可根据需求调整
      />

      {isLoading && <p>正在获取位置信息...</p>}
      {error && <p className="error">错误：{error}</p>}
      {coords && (
        <div>
          <p>纬度：{coords.lat}</p>
          <p>经度：{coords.lon}</p>
          {/* 这里展示天气预报内容 */}
        </div>
      )}
    </div>
  );
}

export default App;

额外优化建议 #

• 输入验证：可以在输入时校验邮编格式（比如仅允许数字、符合目标地区的长度），避免无效输入触发请求。
• 防抖处理：如果用户快速输入邮编，可添加防抖逻辑（比如延迟500ms再发起请求），减少不必要的API调用。
• API密钥安全：不要在前端代码中直接暴露OpenWeather API密钥，建议通过后端代理请求。

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