在react中从Foreca天气API获取天气数据

Question

我试图从Foreca weather api (https://rapidapi.com/foreca-ltd-foreca-ltd-default/api/foreca-weather/)获取天气数据。要获取当前天气，需要位置参数，这是一个数字字符串，不同的城市不同。这个位置参数可以从他们的位置搜索端点获取。

我有一个函数searchCity，它获取位置id，然后将其传递给weatherUrl以获取当前天气。当我第一次搜索一个城市时，我确实得到了位置数组，但没有得到当前天气，axios抛出了400个错误请求。第二次搜索时，它给出了两个结果，但当前的天气响应来自最后一次api调用。

代码如下:

import React from 'react'
import { useState } from 'react';
import axios from 'axios';
const Home = () => {
// const [weather, setWeather] = useState({});
const [city, setCity] = useState('');
const [location, setLocation] = useState([""]);
const [weather, setWeather] = useState({});

const url = `https://foreca-weather.p.rapidapi.com/location/search/${city}`
let weatherUrl;
const options = {
headers: {
'X-RapidAPI-Key': 'apiKeyHere',
'X-RapidAPI-Host': 'foreca-weather.p.rapidapi.com'
}
};
const weatherOptions = {
params: { alt: '0', tempunit: 'C', windunit: 'MS', tz: 'Europe/London', lang: 'en' },
headers: {
'X-RapidAPI-Key': 'apiKeyHere',
'X-RapidAPI-Host': 'foreca-weather.p.rapidapi.com'
}
};
const searchCity = async (e) => {
try {
if (e.key === 'Enter') {
await axios.get(url, options).then((response) => {
setLocation(response.data.locations);
console.log(response.data);
weatherUrl = `https://foreca-weather.p.rapidapi.com/current/${location[0]?.id}`;
})
setCity('')
// To show the current weather of the city searched
currentWeather(); 

}
} catch (err) {
console.error(err);
}
}
const currentWeather = async () => {
try {
await axios.get(weatherUrl, weatherOptions).then((response) => {
setWeather(response.data);
console.log(response.data);
})
} catch (err) {
console.error(err);
}
}
return (
<> <div>
<div className="search">
<input
value={city}
onChange={e => setCity(e.target.value)}
onKeyPress={searchCity}
type="text" />
</div>
<div className="weather">
<h1>City:{location[0]?.name}</h1>
<h1>Country:{location[0]?.country}</h1>
<h1>id:{location[0]?.id}</h1>
<h1>weather:{weather.current?.temperature}</h1>
</div>
</div>
</>
)
}
export default Home;

我做错了什么，或者有更好的方法来实现这一点?

Answer 1

删除axios，只使用fetch，现在工作正常

import React from 'react'
import { useState } from 'react';
const Home = () => {
const [city, setCity] = useState('');
const [location, setLocation] = useState([]);
const [weather, setWeather] = useState({});
const url = `https://foreca-weather.p.rapidapi.com/location/search/${city}`
const options = {
headers: {
'X-RapidAPI-Key': 'apiKeyHere',
'X-RapidAPI-Host': 'foreca-weather.p.rapidapi.com'
}
};
const weatherOptions = {
params: { alt: '0', tempunit: 'C', windunit: 'MS', tz: 'Europe/London', lang: 'en' },
method: 'GET',
headers: {
'X-RapidAPI-Key': 'apiKeyHere',
'X-RapidAPI-Host': 'foreca-weather.p.rapidapi.com'
}
};

let weatherUrl;
const searchCity = async (e) => {
try {
if (e.key === 'Enter') {
fetch(url, options)
.then(response => response.json())
.then(response => {
setLocation(response.locations)
weatherUrl = `https://foreca-weather.p.rapidapi.com/current/${response.locations[0]?.id}`;
currentWeather();
})
}
} catch (err) {
console.error(err);
}
}
const currentWeather = async () => {
try {
fetch(weatherUrl, weatherOptions)
.then((response) => response.json())
.then(response => {
setWeather(response.current);
console.log(response.current);
})
}
catch (err) {
console.error(err);
}
}
return (
<> <div>
<div className="search">
<input
value={city}
onChange={e => setCity(e.target.value)}
onKeyPress={searchCity}
type="text" />
</div>
<div className="weather">
<h1>City:{location[0]?.name}</h1>
<h1>Country:{location[0]?.country}</h1>
<h1>id:{location[0]?.id}</h1>
<h1>weather:{weather.temperature}</h1>
</div>
</div>
</>
)
}
export default Home