reactjs 如何将获取响应推入数组?

5w9g7ksd  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(111)

我有这个

const weather =[]
const fetchFunction = async (event) => {
        event.preventDefault();

        try {
            const response = await (await fetch(
                `https://api.geoapify.com/v1/geocode/search?city=${details.city}&state=${details.state}&format=json&apiKey=27a84d7b0c1b4d52b41acc3e82bbe239`
            )).json();

            const weatherRes = await (await fetch(

                `https://api.tomorrow.io/v4/timelines?location=${response.results[0].lat},${response.results[0].lon}&fields=temperature&timesteps=1h&units=metric&apikey=OkVwrGemAXddKs3T0ruKtK4mPeYEemYy`
            )).json()
                .then(weather.push(weatherRes))
        } catch (error) {
            console.log('eerr', error);
        }
        console.log(weather)
        return weather
    };

但是当我控制台记录天气变量时,它显示为一个空数组。当fetchFunction处于活动状态时,信息只在数组中吗?我也尝试将天气变量导出到其他页面(我使用react)。当我导出函数时,它看起来像这样

<Today fetchFunction={this.fetchFunction}/>

并说它在Today页面上未定义,看起来像这样

import React from'react'
import Home from '../pages/Home'

export default function Today ({fetchFunction}) {

    const weather = fetchFunction.weather
    console.log('today', weather)
    return(
        <div>
            {weather.data}
        </div>
    )
}

即使我只导出天气变量,就像这样

<Today fetchFunction={this.weather}/>

它返回为undefined。当我控制台登录函数时,它确实显示了正确的获取响应,但我似乎无法对它做任何事情

euoag5mw

euoag5mw1#

我认为您遇到的问题与混合async函数和承诺有关。
如果你给一个变量赋值await艾德promise,这个变量将是最终结果(包括任何链接的thencatch语句)。这对你的weatherRes变量来说是个问题,因为then调用实际上是试图将它要初始化的变量立即推送到你的数组中(它应该是异步发生的回调)。
您可以通过将.then(weather.push(weatherRes));替换为weather.push(weatherRes)(利用async/await)或.then(res => weather.push(res))(利用promise)来解决问题。

const weather =[]
const fetchFunction = async (event) => {
        event.preventDefault();

        try {
            const response = await (await fetch(
                `https://api.geoapify.com/v1/geocode/search?city=${details.city}&state=${details.state}&format=json&apiKey=27a84d7b0c1b4d52b41acc3e82bbe239`
            )).json();

            const weatherRes = await (await fetch(

                `https://api.tomorrow.io/v4/timelines?location=${response.results[0].lat},${response.results[0].lon}&fields=temperature&timesteps=1h&units=metric&apikey=OkVwrGemAXddKs3T0ruKtK4mPeYEemYy`
            )).json()

            weather.push(weatherRes)

        } catch (error) {
            console.log('eerr', error);
        }
        console.log(weather)
        return weather
    };

相关问题