React中基于OpenWeatherMap API实现华氏/摄氏温度切换显示

核心问题在于温度转换后的值没有触发组件重渲染，或者调用转换函数的方式没有结合React的状态机制。以下是具体解决步骤：

1. 添加温度单位状态 #

React只有在状态或props变化时才会重渲染组件，所以需要用状态管理当前显示的温度单位（摄氏/华氏），切换单位时更新状态触发重计算。

2. 调整转换函数的调用逻辑 #

不要直接修改原始的weatherData（React状态不可变，直接修改不会触发重渲染），而是在JSX中动态调用转换函数，传入当前温度和单位状态。

3. 完整代码示例 #

import { useState, useEffect } from 'react';

function WeatherCard() {
  const [weatherData, setWeatherData] = useState(null);
  // 用状态管理当前温度单位，true=摄氏度，false=华氏度
  const [useCelsius, setUseCelsius] = useState(true);

  // 调用OpenWeatherMap API获取数据
  useEffect(() => {
    const fetchWeather = async () => {
      try {
        const res = await fetch(
          `https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=YOUR_API_KEY&units=imperial`
        );
        const data = await res.json();
        setWeatherData(data);
      } catch (err) {
        console.error('获取天气数据失败:', err);
      }
    };
    fetchWeather();
  }, []);

  // 温度转换函数（纯计算逻辑）
  const convertTemperature = (temp, toCelsius) => {
    if (toCelsius) {
      // 华氏转摄氏：(F - 32) * 5/9
      return (temp - 32) * (5 / 9);
    } else {
      // 摄氏转华氏：C * 9/5 + 32
      return temp * (9 / 5) + 32;
    }
  };

  return (
    <div className="weather-card">
      {weatherData ? (
        <div>
          <h3>{weatherData.name}</h3>
          {/* 切换温度单位按钮 */}
          <button 
            onClick={() => setUseCelsius(!useCelsius)}
            style={{ marginBottom: '1rem' }}
          >
            切换到{useCelsius ? '华氏度' : '摄氏度'}
          </button>
          {/* 动态渲染转换后的温度 */}
          <p>
            当前温度: {Math.round(convertTemperature(weatherData.main.temp, useCelsius))}°
            {useCelsius ? 'C' : 'F'}
          </p>
          <p>体感温度: {Math.round(convertTemperature(weatherData.main.feels_like, useCelsius))}°{useCelsius ? 'C' : 'F'}</p>
        </div>
      ) : (
        <p>加载天气数据中...</p>
      )}
    </div>
  );
}

export default WeatherCard;

关键注意点 #

• 不要直接修改weatherData对象：React状态是不可变的，直接修改weatherData.main.temp不会触发组件重渲染，必须通过状态更新机制处理。
• 转换函数保持纯逻辑：函数只负责计算，不依赖外部状态，确保每次调用都能返回正确结果。
• 保留条件渲染：确保weatherData存在时才渲染温度内容，避免空值访问报错。

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