如何显示基于当前时间的每小时天气数据？

Question

在我的天气项目中，我有每小时的天气数据。要获取特定城市的每小时数据，它需要具有当前时间的时区，然后可以基于该小时显示数据。请参阅下面的代码以更好地理解。

HourlyForecast.js

export class HourlyForecast extends Component {
    constructor(props) {
        super(props);
        this.state = {};  
    }
    render() {
        const { data } = this.props;       

        if(!data) return null; 
        const time = data.datetime
        const time2 = time.slice(11,13)
        console.log('HOURLY DATA', time2)

        const time5  = moment.tz(this.props.timezone).format('HH:mm').slice(0,2)
        console.log('TIME CURRENT', time5);
    }
}

export default HourlyForecast

我同时获得了两个值，即小时时间和当前时间。我想显示基于特定城市输入的当前时间的数据。例如，在伦敦，英国当前时间为04 AM，每小时数据范围为02-22（从2 AM到10 PM）。现在，我想显示04-09（从04 AM到09 AM）的天气数据。怎么做？

请参阅上图以供参考。数据来自俄罗斯莫斯科。我从天气API中获取的每小时数据的范围是00到09，而当前的计时时间是02。因此如何与每小时数据进行匹配，并仅显示5个元素，即02到07。任何建议都会受到高度赞赏。

示例JSON数据

DATA HOURLY {"data":[{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T07:00:00","pres":991.986,"solar_rad":8.646,"ozone":239.927,"weather":{"icon":"s05d","code":611,"description":"Sleet"},"wind_gust_spd":6.99104,"timestamp_local":"2019-11-29T10:00:00","snow_depth":1,"clouds":100,"ts":1575010800,"wind_spd":2.9362,"pop":15,"wind_cdir_full":"south-southeast","slp":1010.18,"dni":400.98,"dewpt":-0.3,"snow":0.499994,"uv":0.733082,"wind_dir":157,"clouds_hi":6,"precip":0.1015625,"vis":24.1352,"dhi":44.95,"app_temp":-4.8,"datetime":"2019-11-29:07","temp":0.1,"ghi":86.46,"clouds_mid":0,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T08:00:00","pres":991.621,"solar_rad":14.544,"ozone":237.329,"weather":{"icon":"s05d","code":611,"description":"Sleet"},"wind_gust_spd":7.2302,"timestamp_local":"2019-11-29T11:00:00","snow_depth":1,"clouds":100,"ts":1575014400,"wind_spd":3.02753,"pop":15,"wind_cdir_full":"south-southeast","slp":1009.79,"dni":514.77,"dewpt":-0.2,"snow":0.0676169,"uv":0.754683,"wind_dir":157,"clouds_hi":45,"precip":0.01123046875,"vis":24.1348,"dhi":56.99,"app_temp":-4.6,"datetime":"2019-11-29:08","temp":0.3,"ghi":145.44,"clouds_mid":0,"clouds_low":100},{"wind_cdir":"SSE","rh":98,"pod":"d","timestamp_utc":"2019-11-29T09:00:00","pres":991.014,"solar_rad":17.402,"ozone":239.801,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":7.35617,"timestamp_local":"2019-11-29T12:00:00","snow_depth":1,"clouds":100,"ts":1575018000,"wind_spd":3.0718,"pop":0,"wind_cdir_full":"south-southeast","slp":1009.17,"dni":556.24,"dewpt":0,"snow":0,"uv":0.765051,"wind_dir":153,"clouds_hi":91,"precip":0,"vis":24.1347,"dhi":61.75,"app_temp":-4.3,"datetime":"2019-11-29:09","temp":0.5,"ghi":174.02,"clouds_mid":5,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T10:00:00","pres":990.086,"solar_rad":16.655,"ozone":241.9,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":8.48581,"timestamp_local":"2019-11-29T13:00:00","snow_depth":0.9,"clouds":100,"ts":1575021600,"wind_spd":3.54776,"pop":0,"wind_cdir_full":"south-southeast","slp":1008.2,"dni":546.02,"dewpt":0.4,"snow":0,"uv":0.758712,"wind_dir":156,"clouds_hi":100,"precip":0,"vis":24.1352,"dhi":60.55,"app_temp":-3.9,"datetime":"2019-11-29:10","temp":0.8,"ghi":166.55,"clouds_mid":77,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T11:00:00","pres":989.655,"solar_rad":12.441,"ozone":243.157,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":8.51729,"timestamp_local":"2019-11-29T14:00:00","snow_depth":0.8,"clouds":100,"ts":1575025200,"wind_spd":3.46162,"pop":15,"wind_cdir_full":"south-southeast","slp":1007.74,"dni":479.49,"dewpt":0.5,"snow":0,"uv":0.739715,"wind_dir":155,"clouds_hi":90,"precip":0.0009765625,"vis":24.135,"dhi":53.1,"app_temp":-3.7,"datetime":"2019-11-29:11","temp":1,"ghi":124.41,"clouds_mid":100,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"d","timestamp_utc":"2019-11-29T12:00:00","pres":989.567,"solar_rad":5.697,"ozone":243.842,"weather":{"icon":"c04d","code":803,"description":"Overcast clouds"},"wind_gust_spd":8.7108,"timestamp_local":"2019-11-29T15:00:00","snow_depth":0.7,"clouds":100,"ts":1575028800,"wind_spd":3.64744,"pop":0,"wind_cdir_full":"south-southeast","slp":1007.63,"dni":318.85,"dewpt":0.6,"snow":0,"uv":0.723368,"wind_dir":155,"clouds_hi":67,"precip":0,"vis":24.1347,"dhi":36.99,"app_temp":-3.5,"datetime":"2019-11-29:12","temp":1.1,"ghi":56.97,"clouds_mid":90,"clouds_low":100},{"wind_cdir":"SSE","rh":96,"pod":"n","timestamp_utc":"2019-11-29T13:00:00","pres":989.334,"solar_rad":0,"ozone":246.029,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":9.00091,"timestamp_local":"2019-11-29T16:00:00","snow_depth":0.6,"clouds":100,"ts":1575032400,"wind_spd":3.77559,"pop":0,"wind_cdir_full":"south-southeast","slp":1007.39,"dni":0,"dewpt":0.6,"snow":0,"uv":0,"wind_dir":156,"clouds_hi":65,"precip":0,"vis":24.1349,"dhi":0.25,"app_temp":-3.4,"datetime":"2019-11-29:13","temp":1.2,"ghi":0,"clouds_mid":79,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"n","timestamp_utc":"2019-11-29T14:00:00","pres":988.535,"solar_rad":0,"ozone":249.188,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":9.57769,"timestamp_local":"2019-11-29T17:00:00","snow_depth":0.5,"clouds":100,"ts":1575036000,"wind_spd":4.034,"pop":0,"wind_cdir_full":"south-southeast","slp":1006.58,"dni":0,"dewpt":0.6,"snow":0,"uv":0,"wind_dir":152,"clouds_hi":15,"precip":0,"vis":24.135,"dhi":0,"app_temp":-3.5,"datetime":"2019-11-29:14","temp":1.1,"ghi":0,"clouds_mid":84,"clouds_low":100},{"wind_cdir":"SSE","rh":97,"pod":"n","timestamp_utc":"2019-11-29T15:00:00","pres":987.8,"solar_rad":0,"ozone":248.493,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":9.95356,"timestamp_local":"2019-11-29T18:00:00","snow_depth":0.4,"clouds":100,"ts":1575039600,"wind_spd":4.16085,"pop":0,"wind_cdir_full":"south-southeast","slp":1005.83,"dni":0,"dewpt":0.7,"snow":0,"uv":0,"wind_dir":153,"clouds_hi":100,"precip":0,"vis":24.1351,"dhi":0,"app_temp":-3.5,"datetime":"2019-11-29:15","temp":1.1,"ghi":0,"clouds_mid":80,"clouds_low":98},{"wind_cdir":"SSE","rh":97,"pod":"n","timestamp_utc":"2019-11-29T16:00:00","pres":987.123,"solar_rad":0,"ozone":249.409,"weather":{"icon":"c04n","code":803,"description":"Overcast clouds"},"wind_gust_spd":10.4871,"timestamp_local":"2019-11-29T19:00:00","snow_depth":0.4,"clouds":98,"ts":1575043200,"wind_spd":4.36438,"pop":15,"wind_cdir_full":"south-southeast","slp":1005.15,"dni":0,"dewpt":0.7,"snow":0,"uv":0,"wind_dir":149,"clouds_hi":29,"precip":0.00390625,"vis":24.135,"dhi":0,"app_temp":-3.5,"datetime":"2019-11-29:16","temp":1.1,"ghi":0,"clouds_mid":87,"clouds_low":93}],"city_name":"Moscow","lon":"37.61556","timezone":"Europe/Moscow","lat":"55.75222","country_code":"RU","state_code":"48"}