基于OpenWeatherMap的React天气组件开发求助：实现选定城市当前天气展示

Hey Laura, let's walk through how to get this Weather component up and running properly with the OpenWeatherMap API—we'll fix the existing issues and add all the functionality you need!

1. First, Fix Critical API Request Issues #

Your initial code has a couple of blockers that will prevent the API call from working:

• The API URL is missing the https:// prefix—browsers will treat it as a relative path otherwise, leading to a failed request.
• The data parsing logic is off: OpenWeatherMap's response doesn't have a results array. Weather details live directly in data.weather (an array of weather objects), and temperature data is in data.main.temp.

2. Working Component with Full Functionality #

Here's a revised, complete version of your component that includes loading states, error handling, and renders all the weather details you wanted:

import React, { useState, useEffect } from 'react';

function Weather() {
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  // Replace <YOUR-APP-ID> with your actual OpenWeatherMap API key
  const API_KEY = '<YOUR-APP-ID>';
  const DEFAULT_CITY = 'Helsinki';

  const fetchWeather = async () => {
    setLoading(true);
    setError(null);
    try {
      // Add units=metric to get Celsius (use imperial for Fahrenheit)
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${DEFAULT_CITY}&appid=${API_KEY}&units=metric`
      );
      if (!response.ok) {
        throw new Error('Failed to load weather data');
      }
      const data = await response.json();
      // Extract only the data we need for rendering
      const formattedWeather = {
        city: data.name,
        temperature: Math.round(data.main.temp),
        description: data.weather[0].description,
        iconId: data.weather[0].icon
      };
      setWeather(formattedWeather);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // Auto-fetch weather when the component first mounts
  useEffect(() => {
    fetchWeather();
  }, []);

  return (
    <div style={{ maxWidth: '300px', margin: '2rem auto', padding: '1rem', border: '1px solid #eee', borderRadius: '8px' }}>
      <h3>Current Weather</h3>
      
      {loading && <p>Loading...</p>}
      
      {error && <p style={{ color: 'red' }}>Oops: {error}</p>}
      
      {weather && !loading && !error && (
        <div className="weather-details">
          <h4>{weather.city}</h4>
          <p style={{ fontSize: '2rem', margin: '1rem 0' }}>{weather.temperature}°C</p>
          <p>{weather.description.charAt(0).toUpperCase() + weather.description.slice(1)}</p>
          {/* Use OpenWeatherMap's official icon CDN */}
          <img
            src={`https://openweathermap.org/img/wn/${weather.iconId}@2x.png`}
            alt={weather.description}
            style={{ width: '80px', marginTop: '1rem' }}
          />
        </div>
      )}

      {/* Optional refresh button */}
      <button 
        onClick={fetchWeather} 
        disabled={loading}
        style={{ marginTop: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}
      >
        {loading ? 'Refreshing...' : 'Refresh Weather'}
      </button>
    </div>
  );
}

export default Weather;

3. Key Improvements Explained #

• Async/Await: Switched from .then() chains to async/await for cleaner, easier-to-read code.
• State Feedback: Added loading and error states to keep users informed during the API call (no more silent failures!).
• Unit Control: Added &units=metric to get Celsius temperatures—swap with imperial if you want Fahrenheit.
• Icon Rendering: Uses OpenWeatherMap's official icon CDN to display the weather icon correctly.
• Auto-Fetch: Uses useEffect to load weather data as soon as the component mounts.
• Data Formatting: Extracts only the necessary data from the API response to keep state clean.

4. Quick Next Steps to Enhance #

• Add a text input field to let users search for different cities dynamically.
• Store your API key in an environment variable (never hardcode keys in production code!).
• Add extra details like humidity, wind speed, or a 5-day forecast using other OpenWeatherMap endpoints.
• Style the component with custom CSS to match your app's design.

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