Question

我正在使用react-native开发一个简单的气象应用程序。使用fetch-api，我根据自己的ID请求城市的天气，但是即使我输入了不同的城市ID，我也得到了相同的默认结果。这是我的代码：- 这是我的主要组成部分

import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
import Forecast from "./Forecast";
import OpenWeatherMap from "./openweather"

export default class Weather extends Component {
state = {
  forecast: null
}

  handleTextChange = event => {
    let zip = event.nativeEvent.text;
    OpenWeatherMap.fetchForecast(zip).then(forecast => {
      console.log(forecast);
      this.setState({forecast: forecast});
    });
  }

  render() {

    let content = null;
    if(this.state.forecast !== null){
      content = (
        <Forecast
        main = {this.state.forecast.main}
        description = {this.state.forecast.description}
        temp = {this.state.forecast.temp} />
      );
    }
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
           Enter your City ID
        </Text>
         {content}
        <TextInput
         style={styles.input}
         onSubmitEditing={this.handleTextChange} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#808000',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
input:{
fontSize: 20,
borderWidth: 2,
padding: 2,
height: 40,
width: 100,
textAlign: "center"
}
});

这是我的子组件，仅用于显示目的。 Forecast.js

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Forecast extends Component {
render(){
  return(
<View style={styles.container}>

  <Text style={styles.bigText}>
    {this.props.main}
  </Text>

 <Text style= {styles.mainText}>
 Current conditions: {this.props.description}
 </Text>

 <Text style= {styles.bigText}>
 {this.props.temp} ^ F
 </Text>

</View>
);
}
}

const styles= StyleSheet.create({
  container: {height: 130},
  bigText:{
    flex:2,
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    color: "#800000"
  },
  mainText : {flex:1, fontSize: 16, textAlign: "center", color: "#800000"}
});



export default Forecast;

这是我使用fetch api从openweathermap请求天气的地方：-

const weather_api_key = "7e901f7ecb8b36c60ccca4a64c90ee1a";
const weather_url ="https://samples.openweathermap.org/data/2.5/weather?";


function zipurl(zip){
  return  `${weather_url}id=${zip}&APPID=${weather_api_key}`;
}

function  fetchForecast(zip){
  return  fetch(zipurl(zip))
            .then(response => response.json())
            .then(responseJSON  => {
              return {
                main:responseJSON.weather[0].main,
                description:responseJSON.weather[0].description,
                temp:responseJSON.main.temp
              };
            })
            .catch(error=>{
              console.error(error);
            });
}
export default {fetchForecast: fetchForecast}

My path for different files is :-

Answer 1

您使用的是samples.openweathermap.org端点，而不是api.openweathermap.org端点。第二个是您要使用的，实际上，它根据查询参数为您提供了不同的数据。

顺便说一句，感谢您发布相关代码。它使调试问题变得更加容易。尽管我认为您发布的内容远远超出了需要。我只使用了最后一个代码片段，因为这就是问题所在。不在数据呈现中。还是下次，请考虑将API的示例输出与您的期望进行比较。并且，建议您在拥有解决方案后更改API密钥。

提取API（错误）获得相同结果

1 个答案: