我写了一些代码和作品，但我认为也许可以用更好的方法来完成。我想从代码中得到什么？我创建链接并从该对象中获取对象，我想使用某个值，并在获取新对象后在另一个链接中传递该值。我的代码正常工作，但我想看看是否有可能采用新的解决方案。
const [key, setKey] = useState("");
const [data, setData] = useState([]);
useEffect(() => {
getKey();
getWeather();
},[key]);
//此函数从对象获取密钥，而该密钥我将在另一个链接中使用
const getKey = () => {
navigator.geolocation.getCurrentPosition(
(position) => {
const long = JSON.stringify(position.coords.longitude);
const lat = JSON.stringify(position.coords.latitude);
const proxy = `https://cors-anywhere.herokuapp.com/`;
const link = `${proxy}http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&q=${lat}%2C${long}&details=true`;
(async function fetchData(){
const getValue = await fetch (link);
const key = await getValue.json();
setKey(key.Key);
})();
}
);
};
const getWeather = async () => {
const proxy = `https://cors-anywhere.herokuapp.com/`;
const link = `${proxy}http://dataservice.accuweather.com/forecasts/v1/daily/5day/${key}?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&details=true&metric=true`;
const data = await fetch (link);
const getData = await data.json();
setData(getData);
};
您只需对代码做一些微小的更改就可以完成这项工作。制作useEffect和async函数，将键从返回getKey到变量，然后等待变量分配并传递给getWeather。像这样：
const [key, setKey] = useState("");
const [data, setData] = useState([]);
useEffect(async() => { // <---- Converted to async
const apiKey = getKey(); // <---- Assigned to variable
getWeather(await apiKey); // <--- Using apiKey in function rather than just state
},[key]);
const getKey = () => {
navigator.geolocation.getCurrentPosition(
(position) => {
const long = JSON.stringify(position.coords.longitude);
const lat = JSON.stringify(position.coords.latitude);
const proxy = `https://cors-anywhere.herokuapp.com/`;
const link = `${proxy}http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&q=${lat}%2C${long}&details=true`;
(async function fetchData(){
const getValue = await fetch (link);
const key = await getValue.json();
setKey(key.Key);
return key.Key //<------ returned key for useEffect
})();
}
);
};
const getWeather = async (apiKey = key) => { // <----If no value passed to function, will use state value
const proxy = `https://cors-anywhere.herokuapp.com/`;
const link = `${proxy}http://dataservice.accuweather.com/forecasts/v1/daily/5day/${apiKey}?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&details=true&metric=true`;
const data = await fetch (link);
const getData = await data.json();
setData(getData);
};
我返回该值而不是使用state的原因是因为设置状态是异步的，并且useState设置函数目前没有像for那样的回调函数setState。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句