Question

无法显示来自 openweatherAPI 的数据

2019-09-28

470

reactjs openweathermap

我试图显示来自 OpenWeather API 的一些数据。我可以通过 console.log 记录数据并查看对象，但我不知道如何从那里获取正确的值。我将在下面粘贴一些代码。

我的问题是，无论我如何尝试从该对象中获取一些数据，似乎都没有成功。

console.log(data) 给了我一个对象，但每次我尝试例如 data.main.temp 或 data.city 时，它都会给我一个错误。

有什么建议吗？

  state = {
        temperature: null,
        city: undefined,
        country: undefined,
        humidity: undefined,
        description: undefined,
        error: undefined
    }
    getWeather = async (e) => {
        e.preventDefault();
        const city = e.target.elements.city.value;
        const country = e.target.elements.country.value;
        const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = api_call.json();

        console.log(data);        

        //To check after data
        if(city && country){
            this.setState({
                //temperature: data.main.temp,
                //city: data.name,
                //country: data.sys.country,
                //humidity: data.sys.humidity,
                //description: data.weather[0].description,
                error: ""
            });        
        } else {
            this.setState({
                temperature: undefined,
                city: undefined,
                country: undefined,
                humidity: undefined,
                description: undefined,
                error: "Please enter values"
            });

How the object looks while fetched.

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object
base: "stations"
clouds: {all: 40}
cod: 200
coord: {lon: -2.24, lat: 53.48}
dt: 1569681998
id: 2643123
main: {temp: 15.43, pressure: 1005, humidity: 87, temp_min: 12.78, temp_max: 17.78}
name: "Manchester"

Answer 1

我相信 api_call.json() 返回了一个承诺，这就是您遇到问题的原因。

我建议您也尝试在该语句上使用 await ：

const data = await api_call.json();

您可以在此处找到有关 fetch api 的更多信息： https://developers.google.com/web/updates/2015/03/introduction-to-fetch

干杯！

Answer 2

您是否尝试过使用 try/catch 类似：

getWeather = async (e) => {
    e.preventDefault();
    let response = null;
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    try {
        response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = response.json()
        data && this.setState({
                temperature: data.main && data.main.temp,
                city: data.name,
                country: data.sys && data.sys.country,
                humidity: data.sys && data.sys.humidity,
                description: data.weather[0].description,
                error: ""
            }); 
    } catch (error) {
         this.setState({
                temperature: undefined,
                city: undefined,
                country: undefined,
                humidity: undefined,
                description: undefined,
                error: "Please enter values"
         });
    }
}