Weather API调用问题求助：输入邮编后始终显示同一城镇名称

核心错误原因 #

你遇到的问题根源是请求URL完全硬编码，没有使用用户输入的邮编，同时还有几处小问题影响功能和规范：

具体错误点及修复方案 #

1. 硬编码的请求URL
   原代码中url变量是固定值，始终请求邮编36578的数据，完全忽略了用户输入的zipCode。需要动态生成URL，将用户输入的邮编拼接进去。

2. 冗余且未使用的API Key
   代码里既在URL中硬编码了appid，又定义了apiKey变量却未使用，建议统一使用变量管理API Key，避免重复硬编码。

3. Input的name属性错误
   Input的name属性被设置为{zipCode}，这会导致输入框的name随输入值动态变化，不符合表单规范，应改为固定字符串（如"zipCode"）。

修复后的完整代码 #

import { useState } from 'react';
import axios from 'axios';

const Weather = () => {
    const [zipCode, setZipCode] = useState("");
    const [weather, setWeather] = useState(null);
    const [error, setError] = useState(null);

    // 用变量管理API Key，避免硬编码
    const apiKey = "da2f2d11af56e955015eed08e226b806";
    // 动态生成URL，使用用户输入的zipCode
    const getApiUrl = () => {
        // 假设使用美国邮编，若支持其他国家可扩展国家代码输入
        return `https://api.openweathermap.org/data/2.5/weather?zip=${zipCode},us&units=imperial&appid=${apiKey}`;
    };

    const getWeatherData = async () => {
        // 先校验输入是否为空
        if (!zipCode.trim()) {
            setError("请输入有效的邮编");
            return;
        }
        try {
            const response = await axios.get(getApiUrl());
            setWeather(response.data);
            setError(null);
            console.log(response.data);
        } catch (error) {
            setError("获取天气数据失败，请检查邮编是否正确");
        }
    };

    const handleChange = (e) => {
        setZipCode(e.target.value);
    };

    const handleClick = () => {
        getWeatherData();
    };

    return (
        <>
            <div className="weather-container">
                <h1 className="weather-header">Weather App</h1>
                <div className="weather-form">
                    <input
                        placeholder="Enter Zip"
                        name="zipCode" {/* 改为固定name属性 */}
                        onChange={handleChange}
                        value={zipCode}
                    />
                    <button onClick={handleClick}> Get Weather </button>
                </div>

                {error && <p className="error-message">{error}</p>}
                {weather && (
                    <div className="weather-info">
                        <h2>Name : {weather.name}</h2>
                        <p>Temperature : {weather.main.temp}°F</p>
                        <p>Description : {weather.weather[0].description}</p>
                    </div>
                )}
            </div>
        </>
    );
};
export default Weather;

额外优化说明 #

• 增加了输入校验：如果用户未输入邮编就点击按钮，会提示错误信息
• 简化了事件处理函数的写法（如onChange={handleChange}替代箭头函数包裹）
• 优化了错误提示文案，更具针对性

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