如何在运行fetch之前等待值?

Question

编辑:我最终使用axios而不是fetch，它工作得很好。只是删除了response.json()并将fetch切换到axios.get.

我在这里的第一篇文章可能是一个相当简单的问题。我试图得到的最后和长值实际上是之前被馈送到URL的东西。大多数时候，我得到一个错误的请求返回错误，因为lat和long值还没有传播。

谢谢!

代码在这里(删除了API密钥):

const fetchData = async () => {
navigator.geolocation.getCurrentPosition(function (position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});

const url =
await `https://api.openweathermap.org/data/2.5/weather/?lat=${lat}&lon=${long}&units=metric&APPID=DELETED`;

await fetch(url)
.then((response) => {
return response.json();
})
.then((result) => {
setData(result);
})
.catch(console.error);
};
fetchData();
}, [lat, long]);

Answer 1

似乎在使用它们的useEffect中设置了late和long。在另一个useEffect中使用它们之前，你可能应该设置它们。

useEffect(() => {
navigator.geolocation.getCurrentPosition(function (position) {
setLat(position.coords.latitude);
setLong(position.coords.longitude);
});
}, [])
useEffect(() => {
const fetchData = async () => {
const url = `https://api.openweathermap.org/data/2.5/weather/?lat=${lat}&lon=${long}&units=metric&APPID=DELETED`;

await fetch(url)
.then((response) => {
return response.json();
})
.then((result) => {
setData(result);
})
.catch(console.error);
};
if (lat && long) {
fetchData();
}
}, [lat, long]);

Answer 2

要么必须将这些值存储在函数中，要么必须等待状态更新。State是异步的，这就是你得到这个错误的原因。