React组件中If语句失效：天气API数据判断异常求助

嘿，我来帮你排查下这个问题！你说不管温度多少都显示cloudy，大概率是温度数据的类型/格式不对或者判断逻辑里有隐性坑，咱们一步步来捋：

1. 先确认API返回的温度数据到底是什么样的 #

首先你得搞清楚从API拿到的温度值是不是你以为的数字类型。很多天气API返回的温度可能是字符串（比如"25"），甚至带单位（比如"25°C"），这直接拿来和数字20比较就会出问题。

你可以在getWeather函数里加几个打印，看看数据细节：

getWeather = async () => {
  try {
    const response = await fetch('你的天气API地址');
    const data = await response.json();
    // 打印完整数据，确认温度字段的位置（比如OpenWeatherMap是data.main.temp）
    console.log('完整天气数据:', data);
    // 打印温度值和它的类型
    const temp = data.main.temp; // 这里换成你实际的字段路径
    console.log('温度值:', temp);
    console.log('温度类型:', typeof temp);
    this.setState({ temp });
  } catch (err) {
    console.error('获取天气失败:', err);
  }
};

2. 处理温度数据的格式问题 #

根据打印结果，对应处理：

• 如果温度是字符串类型的数字（比如"22"），转成数字再存到state：

  this.setState({ temp: Number(temp) });
  

• 如果温度带单位（比如"22°C"），先提取数字部分：

  const tempNum = parseFloat(temp.replace(/[^0-9.]/g, ''));
  this.setState({ temp: tempNum });
  

• 如果API返回的是开尔文温度（比如OpenWeatherMap默认返回开尔文），记得转成摄氏度：

  const celsiusTemp = (temp - 273.15).toFixed(1);
  this.setState({ temp: Number(celsiusTemp) });
  

3. 检查判断逻辑的细节 #

确保你的判断条件没有写错，比如别把>写成<，同时处理初始状态（比如数据还没加载完时的情况）：

render() {
  const { temp } = this.state;
  const sunny = <div>☀️ 晴天动画</div>;
  const cloudy = <div>☁️ 阴天动画</div>;

  // 数据还没加载时显示加载提示
  if (temp === undefined) {
    return <div>加载天气中...</div>;
  }

  // 现在再做判断就靠谱了
  return (
    <div>
      {temp > 20 ? sunny : cloudy}
    </div>
  );
}

4. 确认状态更新是否生效 #

还要确保getWeather函数在组件挂载时被调用了，比如在componentDidMount里触发：

componentDidMount() {
  this.getWeather();
}

按这个流程排查下来，应该就能解决判断失效的问题啦！

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