难以将值存储在 const 中并保持输入值的状态（不是道具）

Question

作为一个初学者项目，我决定使用google maps API创建一个简单的地方输入，返回距离react项目。我从 youtube 上找到了一个很好的教程，在那里我学到了这一点。但是，当我尝试将 {coordinates.lng} 和 {coordinates.lat} 存储在 const 中以便稍后使用 Google maps API 计算距离时遇到了问题。我尝试创建自己的 add 函数并调用它，但它不起作用。某处我的理解有缺陷，我试图指出它，但我真的不明白。 如何存储 {coordinates.lat} 和 {coordinates.lng} 的值？

import React from "react";
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
} from "react-places-autocomplete";

export default function Itinerary() {
  const [address, setAddress] = React.useState("");
  const [coordinates, setCoordinates] = React.useState({
    lat: null,
    lng: null
  });

  const add = (coordinates) => {
  const Latitude= {coordinates.lat};
  console.log(Latitude);
  };

  const handleSelect = async value => {
    const results = await geocodeByAddress(value);
    const latLng = await getLatLng(results[0]);
    setAddress(value);
    setCoordinates(latLng);
  };

  return (
    <div className="container">
    <div className="row">
    <div className="col-md-6 mt-5 mx-auto">
      <PlacesAutocomplete
        value={address}
        onChange={setAddress}
        onSelect={handleSelect}
       >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <h1>Latitude: **{coordinates.lat}**</h1>
            <h1>Longitude: **{coordinates.lng}**</h1>
            <h1> {console.log({coordinates.lng}}</h1>
            <input size="50" height="40"{...getInputProps({ placeholder: "Type address" })} />
            {add(coordinates)}
            <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>
    </div>
    </div>
  );
}

Answer 1

要定义位置的架构，

place:{
      name: 'NameOfThePlace',
      location:{
          type:'Point',
          coordinates:[long,lat]
         }
       }

这是一个位置的对象，其中，您的纬度和经度是数组的形式。创建地点对象后，如果您选择多个地点，也可以将它们放入地点数组中。 这种格式还支持mongodb结构的保存和检索。