我试图将我的自动完成地址拆分成单独的组件来自动填充地址表单。我可以让大多数地址组件工作,但当我到达“Street_address”部分时,它不工作。我从Google自己的文档中复制并粘贴了参数名称,但当我运行代码时,我得到“Undefined”。以下是组件结构:
<GooglePlacesAutocomplete
apiKey={process.env.REACT_APP_PLACES_ID}
apiOptions={{ language: 'en', region: 'en' }}
selectProps={{
onChange: async (value) => {
setLocation(value)
const address = value?.label || ''
if (address) {
let place = await geocodeByAddress(address)
const { lat, lng } = await getLatLng(place[0])
let address_components = {}
for (var i = 0; i < place[0].address_components.length; i++) {
var addressType = place[0].address_components[i].types[0]
switch (addressType) {
case 'postal_code':
address_components.postal_code = place[0].address_components[i].short_name
break
case 'street_address':
address_components.street_address = place[0].address_components[i].long_name
break
case 'administrative_area_level_1':
address_components.administrative_area_level_1 = place[0].address_components[i].short_name
break
case 'locality':
address_components.locality = place[0].address_components[i].short_name
break
}
console.log(address_components.street_address)
console.log(address_components.locality)
console.log(address_components.administrative_area_level_1)
console.log(address_components.postal_code);
console.log(lat)
console.log(lng)
}
const searchedAddress = {
address: value,
lat,
lng
}
SaveLocation(searchedAddress);
}
},
isClearable: true,
value: location,
placeholder: placeholder
}}
/>
城市,州,邮政,lat & lng都返回正常,但无论我做什么,我都不能得到工作的street_address。我也试过long_name和short_name,没有区别。你知道为什么会发生这种情况吗?任何帮助都非常感谢!
另外,如果任何人有任何替代解决方案使用自动完成,我是开放给他们。只是试图填写一个地址表使用自动完成。
1条答案
按热度按时间yjghlzjz1#
感谢@MrUpsidown的评论,所选地址分解为单独的组成部分,
street_address
不在其中。必须将street_number
和route
放在一起才能得到正确的街道地址部分。