下面的函数获取用户的当前位置:
const getCurrentLocation = () => {
fetch("https://ipinfo.io/json?token=$TOKEN")
.then((response) => response.json())
.then((jsonResponse) => {
console.log(jsonResponse)
return jsonResponse;
});
};
useEffect(() => {
console.log(getCurrentLocation());
}, []);
登录useEffect
显示undefined
,它首先出现在控制台中,然后jsonResponse
在控制台中显示相应的对象。为什么?
getCurrentLocation
不返回任何东西,这就是为什么你得到undefined
。
此外,fetch
返回一个Promise
,它是异步的,这意味着你不能立即得到结果,你必须传递一个回调到then
来获得结果,当它是可用的。
const getCurrentLocation = () => {
return fetch("https://ipinfo.io/json?token=$TOKEN")
.then(response => response.json());
};
useEffect(() => {
getCurrentLocation()
.then(location => console.log(location));
}, []);
getCurrentLocation
函数没有返回任何内容。尝试保存当前状态下的位置,以便在需要时访问它:
const [currentLocation, setCurrentLocation] = useState(null);
const getCurrentLocation = () => {
fetch("https://ipinfo.io/json?token=$TOKEN")
.then((response) => response.json())
.then((jsonResponse) => {
setCurrentLocation(jsonResponse); // <- save the location in state
});
};
useEffect(() => {
getCurrentLocation();
}, []);
return <div>{currentLocation}</div>
如果您需要useEffect
中的位置,您可以这样做:
useEffect(() => {
if (currentLocation !== null) {
// ...
}
}, [currentLocation])
你可以简单地使用async/await来获得响应,看看这个:
const getCurrentLocation = async () => {
const result = await fetch("https://ipinfo.io/json?token=$TOKEN");
return result.json();
};
const handleGetLocation = async () => {
const result = await getCurrentLocation();
console.log(result);
};
useEffect(() => {
handleGetLocation();
}, []);