如何解决谷歌react-places-autocomplete:为什么我显示以前的城市坐标而不是实际的坐标?
很高兴得到您的帮助:我在我的应用程序中添加了“ react-places-autocomplete”,但是在获取一些数据时遇到了问题。
我有一个带有多个输入的表单,我们可以在其中搜索城市。
在第一个输入中,我正在寻找一个名为“图卢兹”的城市,然后单击以下建议: 它会在搜索栏顶部显示正确的数据,但在控制台上,名称可以,但坐标为空。
仍然在第一次输入时,我正在寻找一个名为“波尔多”的城市,然后单击建议: 它仍然在搜索栏的顶部显示正确的数据,但是在控制台上,它显示名称“ bordeaux”,但上一个来自“ Toulouse”的坐标!
您知道为什么吗? 非常感谢您的帮助!
这里是搜索组件
import React,{ useState,useContext } from 'react';
import PlacesAutocomplete,{
geocodeByAddress,getLatLng,} from 'react-places-autocomplete';
import CitiesContext from './CitiesContext';
export default function Search(props) {
const { cities,updateCities } = useContext(CitiesContext);
const [address,setAddress] = useState('');
const [coordinates,setCoordinates] = useState({
lat: null,lng: null,});
const handleSelect = async value => {
const results = await geocodeByAddress(value);
// we save the lat and long from the 1st result/ selected one
const latLng = await getLatLng(results[0]);
// Updating coordinates
setCoordinates(latLng);
// Updating address
setAddress(value);
const city = {
name: value,coordinates,};
updateCities(city);
console.log('Here is the city: ',city); // Name is OK,but coordinates are the previous ones !
};
return (
<div>
<PlacesAutocomplete
value={address}
onChange={setAddress}
onSelect={handleSelect}
>
{({ getInputProps,suggestions,getSuggestionItemProps,loading }) => (
<div>
<p>
latitude: {coordinates.lat} - longitude: {coordinates.lng}
</p>
<p>address: {address}</p>
<input {...getInputProps({ placeholder: props.placeholder })} />
<div>
{loading ? <div>Loading...</div> : null}
{suggestions.map(suggestion => {
const style = {
backgroundColor: suggestion.active ? '#41b6e6' : '#fff',};
return (
<div {...getSuggestionItemProps(suggestion,{ style })}>
{suggestion.description}
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
</div>
);
}
```
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。