【发布时间】：2021-09-29 22:52:57
【问题描述】：
我正在使用天气 api 在本机反应中创建一个天气应用程序。
API 为我提供了从午夜开始的每小时天气。我只想显示当前时间及之后的天气。
我尝试使用 .map 遍历每小时天气，他们检查信息是否等于或大于当前时间。我无法让它工作或显示任何东西。
这是我的代码
const fetch = require('node-fetch');
fetch(
'https://api.weatherapi.com/v1/forecast.json?&q=' +
this.state.latitude +
',' +
this.state.longitude,
{
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
},
)
.then(response => response.json())
.then(responseJson => {
console.log(responseJson);
this.setState({
isLoading: false,
dataSource: responseJson,
});
})
.catch(error => {
console.error(error);
});
},
);
renderView() {
this.state.dataSource.forecast.forecastday[0].hour.map(item =>
this.state.dataSource.location.localtime_epoch >= item.time_epoch ? (
<ScrollView horizontal={true}>
<View
style={{
flex: 1,
flexDilocaltime_eprection: 'row',
textAlign: 'center',
}}>
<View>
<Text>{item.time.split(' ')[1]}</Text>
<Image
source={{url: 'https:' + item.condition.icon}}
style={{
width: 50,
height: 50,
paddingBottom: 10,
alignItems: 'center',
justifyContent: 'center',
}}
/>
<Text>{item.temp_c + '℃'}</Text>
</View>
): <Text>{item.time_epoch}</Text> );
</View>
</ScrollView>
) : (
<Text>Not Found!</Text>
),
);
} 这是json
{
"location": {
"name": "New York",
"region": "New York",
"country": "United States of America",
"lat": 40.71,
"lon": -74.01,
"tz_id": "America/New_York",
"localtime_epoch": 1623928876,
"localtime": "2021-06-17 7:21"
},
"current": {
"last_updated_epoch": 1623928500,
"last_updated": "2021-06-17 07:15",
"temp_c": 15.6,
"temp_f": 60.1,
"is_day": 1,
"condition": {
"text": "Sunny",
"icon": "//cdn.weatherapi.com/weather/64x64/day/113.png",
"code": 1000
},
"wind_mph": 4.3,
"wind_kph": 6.8,
"wind_degree": 310,
"wind_dir": "NW",
"pressure_mb": 1016.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 46,
"cloud": 0,
"feelslike_c": 15.6,
"feelslike_f": 60.1,
"vis_km": 10.0,
"vis_miles": 6.0,
"uv": 1.0,
"gust_mph": 8.7,
"gust_kph": 14.0
},
"forecast": {
"forecastday": [
{
"date": "2021-06-17",
"date_epoch": 1623888000,
"day": {
"maxtemp_c": 27.0,
"maxtemp_f": 80.6,
"mintemp_c": 15.9,
"mintemp_f": 60.6,
"maxwind_mph": 8.3,
"maxwind_kph": 13.3,
"totalprecip_mm": 0.0,
"totalprecip_in": 0.0,
"avgvis_km": 10.0,
"avgvis_miles": 6.0,
"avghumidity": 35.0,
"daily_will_it_rain": 0,
"daily_chance_of_rain": "0",
"daily_will_it_snow": 0,
"daily_chance_of_snow": "0",
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/day/116.png",
"code": 1003
},
"uv": 7.0
},
"astro": {
"sunrise": "05:25 AM",
"sunset": "08:30 PM",
"moonrise": "12:16 PM",
"moonset": "01:02 AM",
"moon_phase": "Waxing Gibbous",
"moon_illumination": "55"
},
"hour": [
{
"time_epoch": 1623902400,
"time": "2021-06-17 00:00",
"temp_c": 17.8,
"temp_f": 64.0,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 9.6,
"wind_kph": 15.5,
"wind_degree": 326,
"wind_dir": "NNW",
"pressure_mb": 1014.0,
"pressure_in": 30.4,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 43,
"cloud": 12,
"feelslike_c": 17.8,
"feelslike_f": 64.0,
"windchill_c": 17.8,
"windchill_f": 64.0,
"heatindex_c": 17.8,
"heatindex_f": 64.0,
"dewpoint_c": 5.1,
"dewpoint_f": 41.2,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 13.0,
"gust_kph": 20.9,
"uv": 1.0
},
{
"time_epoch": 1623906000,
"time": "2021-06-17 01:00",
"temp_c": 16.9,
"temp_f": 62.4,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 8.7,
"wind_kph": 14.0,
"wind_degree": 321,
"wind_dir": "NW",
"pressure_mb": 1014.0,
"pressure_in": 30.4,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 44,
"cloud": 21,
"feelslike_c": 16.9,
"feelslike_f": 62.4,
"windchill_c": 16.9,
"windchill_f": 62.4,
"heatindex_c": 16.9,
"heatindex_f": 62.4,
"dewpoint_c": 4.6,
"dewpoint_f": 40.3,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 11.6,
"gust_kph": 18.7,
"uv": 1.0
},
}【问题讨论】：
-
尝试使用代码和框制作一个可重复性最低的示例，以正确演示它如何不显示任何内容。
-
如果您在问题中没有使用任何 react-native 特定功能，我认为在 react web 中复制演示没有任何问题。除非您的问题与 react-native 库有关，并且代码仅在 react-native 中失败，否则您还可以通过提供更准确的信息来改进您的问题。这应该可以帮助您进行调试。
-
我实际上在使用 react-native-geolocation-service
标签： javascript json react-native