React天气应用中摄氏度转华氏度的实现位置与方法求助

问题原因 #

你之前的写法错误在于JSX中嵌套了大括号，且计算逻辑的括号位置不对。JSX里嵌入JavaScript表达式只需要一层大括号，不需要嵌套多层。

解决方法一：直接在JSX中编写正确的转换表达式 #

把整个温度转换逻辑放在单个大括号内，确保运算顺序正确：

<div>
  摄氏度: {Math.round(weather.main.temp)}°C
</div>
<div>
  华氏度: {Math.round((weather.main.temp * 9/5) + 32)}°F
</div>

这里先计算摄氏度乘以9/5，再加32，最后用Math.round()取整，整个表达式包裹在一层大括号里就能正确渲染。

解决方法二：将转换逻辑抽成变量（推荐） #

把温度计算逻辑提取到App函数内部的变量中，让JSX代码更简洁易维护：

function App() {
  // 假设已通过API获取到weather数据
  const celsiusTemp = Math.round(weather.main.temp);
  const fahrenheitTemp = Math.round((celsiusTemp * 9/5) + 32);

  return (
    <div className="weather-container">
      <div>当前温度（摄氏度）: {celsiusTemp}°C</div>
      <div>当前温度（华氏度）: {fahrenheitTemp}°F</div>
    </div>
  );
}

这种方式的好处是后续如果需要调整转换规则（比如保留一位小数），只需要修改变量定义的地方即可，不需要改动JSX结构。

额外提醒：处理数据加载状态 #

要确保weather数据已经成功获取，避免因数据未加载完成导致weather.main报错，可以添加条件渲染：

function App() {
  const [weather, setWeather] = useState(null);

  // 这里写API请求逻辑，获取数据后调用setWeather更新状态

  // 数据未加载时显示加载提示
  if (!weather) {
    return <div>加载天气数据中...</div>;
  }

  const celsiusTemp = Math.round(weather.main.temp);
  const fahrenheitTemp = Math.round((celsiusTemp * 9/5) + 32);

  return (
    <div className="weather-container">
      <div>当前温度（摄氏度）: {celsiusTemp}°C</div>
      <div>当前温度（华氏度）: {fahrenheitTemp}°F</div>
    </div>
  );
}

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