如何在React JS中用OpenWeatherMap API获取日出日落及本地时间

核心逻辑纠正 #

OpenWeatherMap返回的dt、sunrise、sunset都是UTC标准的Unix时间戳（秒级），timezone_offset是目标时区与UTC的偏移秒数（正数为东时区，负数为西时区）。你之前用偏移量除以3600再乘以时间戳的计算方式完全错误，正确逻辑是将UTC时间戳叠加时区偏移秒数，或直接用Moment.js的时区偏移方法转换。

WeatherCard组件修正 #

用moment.unix()解析UTC时间戳，再通过utcOffset()设置目标时区偏移（utcOffset接受分钟数，需把秒级偏移除以60）：

const WeatherCard = ({item}) => {
  const timezoneOffsetMinutes = item.timezone_offset / 60;
  const localTime = moment.unix(item.current.dt).utcOffset(timezoneOffsetMinutes).format("HH:mm");

  return (
    <div className="city-time">
          <h1 className="text-xl">{item.timezone}</h1>
          <p className="text-sm">{localTime}</p>
     </div>
  );
}

export default WeatherCard

也可以直接叠加偏移秒数生成本地时间戳，写法更简洁：

const localTime = moment.unix(item.current.dt + item.timezone_offset).format("HH:mm");

SetRise组件修正 #

注意你之前的格式字符串用了hh:MM，其中MM代表月份，分钟必须用小写mm，同时修正时间计算逻辑：

const SetRise = ({times}) => {
  const timezoneOffsetMinutes = times.offset / 60;
  const sunriseTime = moment.unix(times.sunrise).utcOffset(timezoneOffsetMinutes).format("hh:mm");
  const sunsetTime = moment.unix(times.sunset).utcOffset(timezoneOffsetMinutes).format("hh:mm");

  return (
    <div className="w-full h-full flex flex-col items-start justify-between">
      <p className="text-2xl">{sunriseTime}</p>
      <p className="text-2xl">{sunsetTime}</p>
    </div>
  );
}

export default SetRise

进阶优化（可选） #

如果API返回了timezone字段（比如"Europe/London"），可以安装moment-timezone插件直接设置时区，避免手动计算偏移：

npm install moment-timezone

修改后代码示例：

import moment from 'moment-timezone';

// WeatherCard中
const localTime = moment.unix(item.current.dt).tz(item.timezone).format("HH:mm");

// SetRise中（需传入timezone字段）
const sunriseTime = moment.unix(times.sunrise).tz(times.timezone).format("hh:mm");

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