如何从react-geosuggest中提取邮政编码值？

Question

简短说明

我正在尝试使用onSuggestSelect组件从npm react-geosuggest道具提供的结果中捕获城市，州和邮政编码值。您可以在这里找到有关它的信息：https://www.npmjs.com/package/react-geosuggest

预期结果

我创建了一个处理程序来处理onSuggestSelect返回的更改，在该处理程序中，我试图捕获需要将其持久化的数据。使用以下内容：

handleOnSuggestSelect(suggestion) {
  this.setState({
    address: suggestion.label
  });
}

我希望proposal.label值将这样存储整个地址： 1234 Maple Street, Miami, FL, 33010, USA

实际结果

我看到的不是1234 Maple Street, Miami, FL, 33010, USA，而是显示了1234 Maple Street, Street的值。为什么,Street的值显示在初始街道地址之后，而不显示其余的预期信息（城市，州，邮政编码）？

其他信息

如何从标签中获得不同的地址成分？尤其是城市，州和邮政编码？

您可以看到我如何设置react-geosuggest组件，如我在此处发布的答案中所述：Get input value of react-geosuggest input field

Answer 1

要获取handleOnSuggestSelect中的实际地址部分，您可以像这样访问它们：

handleOnSuggestSelect(suggest) {
  if (!suggest.gmaps) {
    return;
  }

  const components = suggest.gmaps.address_components;

  const address = {
    street: this.findAddressComponent(components, 'street_number', 'short_name') + ' ' + this.findAddressComponent(components, 'route', 'short_name'),
    city: this.findAddressComponent(components, 'locality', 'short_name'),
    state: this.findAddressComponent(components, 'administrative_area_level_1', 'short_name'),
    zip: this.findAddressComponent(components, 'postal_code', 'short_name'),
  }

  this.setState({
    address
  });
}

findAddressComponent(components, type, version) {
  const address = components.find(function(component) {
    return (component.types.indexOf(type) !== -1);
  });

  return address[version];
}

与其尝试从标签中获取地址成分，不如尝试上面的方法。