我有这个
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×teps=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。当我控制台登录函数时,它确实显示了正确的获取响应,但我似乎无法对它做任何事情
1条答案
按热度按时间euoag5mw1#
我认为您遇到的问题与混合
async
函数和承诺有关。如果你给一个变量赋值
await
艾德promise,这个变量将是最终结果(包括任何链接的then
或catch
语句)。这对你的weatherRes
变量来说是个问题,因为then
调用实际上是试图将它要初始化的变量立即推送到你的数组中(它应该是异步发生的回调)。您可以通过将
.then(weather.push(weatherRes));
替换为weather.push(weatherRes)
(利用async/await
)或.then(res => weather.push(res))
(利用promise)来解决问题。