为什么 google 将自动完成 return 置于空状态且没有数据？

Question

我正在学习 Leigh Halliday about Google Maps in react 的教程。我有点偏离，因为我需要这张地图的目的与他所展示的不同。

到目前为止，这是我的代码：

    import React, {
        useState,
        useRef,
        useCallback
    } from "react";
    import {
        GoogleMap,
        useLoadScript,
        // Marker,
        // InfoWindow,
    } from "@react-google-maps/api";
    import usePlacesAutocomplete, {
        getGeocode,
        getLatLng,
    } from "use-places-autocomplete";
    import {
        Combobox,
        ComboboxInput,
        ComboboxPopover,
        ComboboxList,
        ComboboxOption
    } from "@reach/combobox";
    import "@reach/combobox/styles.css";
    
    import { GOOG_API } from "../keys";
    import styles from "./mapStyles";
    
    
    const libraries = ["places"];
    const mapContainerStyle = {
        width: "99.5vw",
        height: "91.2vh"
    };
    const center = {
        lat: 37.090000,
        lng: -95.712900
    };
    const options = {
        styles
    };
    
    
    function Search() {
        const kilometers200InMeters = 200 * 1000;
    
        const {
            ready,
            value,
            suggestions: { status, data },
            setValue,
            clearSuggestion,
        } = usePlacesAutocomplete({
            requestOptions: {
                location: {
                    lat: () => 37.090000,
                    lng: () => -95.712900,
                    radius: kilometers200InMeters
                }
            }
        }); // TODO: update to user lat/lng from browser
    
        console.log(`ready: ${ready}, val: ${value}, \n status: ${status}, data: ${data}`)
        // TODO: status keeps showing up "" and data keeps showing up []
        // value keeps updating with every keystroke, and ready always returns true
    
        return (
            <div className="searchBox">
                <Combobox onSelect={async (address) => {
                    try {
                        const results = await getGeocode({ address });
                        clearSuggestion();
                        console.log(`result: ${results[0]}`);
    
                    } catch (err) {
                        console.log(`error!: ${err}`);
                    }
                    console.log(address);
                }}>
                    <ComboboxInput
                        value={value}
                        onChange={(e) => {
                            setValue(e.target.value);
                        }}
                        disabled={!ready}
                        placeholder="Enter an address"
                    />
                    <ComboboxPopover>
                        <ComboboxList>
                            {status === "OK" && data.map(({ id, description }) => (
                                <ComboboxOption key={id} value={description} />
                            ))}
                            {status === "ZERO_RESULTS" && "No results found"}
                            {status === "NOT_FOUND" && "Does not exist (according to google)"}
                        </ComboboxList>
                    </ComboboxPopover>
                </Combobox>
            </div>
        )
    }
    
    
    function Map() {
    
    
        const { isLoaded, loadError } = useLoadScript({
            googleMapsApiKey: GOOG_API.KEY,
            libraries,
        });
    
        // const [selected, setSelected] = useState(null);
    
        const mapRef = useRef();
        const onMapLoad = useCallback((map) => {
            mapRef.current = map;
        }, [])
        if (loadError) return "Error loading maps";
        if (!isLoaded) return "Loading maps...";
    
        return <div>
            <Search />
            <GoogleMap
                mapContainerStyle={mapContainerStyle}
                zoom={5}
                center={center}
                options={options}
                onLoad={onMapLoad}>
    
                {/* {if (savedSearches && savedSearches.map((search) => {
                    <Marker
                        key={search.id}
                        position={{ lat: search.lat, lng: search.lng }}
                        icon={{
                            url: "./location/to/magnifyingglass.svg",
                            scaledSize: new window.google.maps.Size(12, 12),
                            origin: new window.google.maps.Point(0, 0),
                            anchor: new window.google.maps.Point(6, 6)
                        }}
                        onClick={() => {setSelected{search}}}
                        />
                }))} */}
    
                {/* {selected ? (<InfoWindow 
                                    position={{lat: search.lat, lng: search.lng}}
                                    onCloseClick={() => {setSelected(null)}}>
                    <div>
                        <h2>{search.title}</h2>
                        <p><a href="#">Go to search</a></p>
                    </div>
                </InfoWindow>) : null } */}
            </GoogleMap>
        </div>
    
    }
    
    export default Map;

这正在作为一个组件加载到更大的应用程序中。我的 API 密钥启用了位置。地图已加载，因此它正在访问服务器并且我的密钥有效。

我已将问题缩小到 status 和 data 没有 return 任何值这一事实。

我查看了 suggestion 对象，它看起来像这样 {"loading":false,"status":"","data":[]}

status 应该 return 来自 this list 的值之一。具体来说，我希望它 return OK，但它应该 return 一些东西。

为什么它根本 return 没有任何状态。我想这表示它没有连接到服务器，但其他一切正常。

Answer 1

一个相当简单的错误。

requestOptions: {
                    location: {
                        lat: () => 37.090000,
                        lng: () => -95.712900,
                        radius: kilometers200InMeters
                    }
                }

应该是：

requestOptions: {
                    location: {
                        lat: () => 37.090000,
                        lng: () => -95.712900
                     },
                     radius: kilometers200InMeters
                }

为什么 google 将自动完成 return 置于空状态且没有数据？

Why does google places autocomplete return an empty status and no data?

javascript

reactjs

google-maps-api-3

google-places-api