React 上的 Geoapify Geocoder 自动完成 placeSelect 无法正常工作

Question

我正在尝试在 React 中使用带有名为 @geoapify/react-geocoder-autocomplete 的免费 API 的自动完成地址组件。已经下载了 geoapify/autocomplete 和 geoapify/react-autocomplete，尝试了很多东西，但是

placeSelect

不起作用。

geoapify 仓库：https://github.com/geoapify/react-geocoder-autocomplete

我的问题是控制台上什么也没有出现，不知道该怎么办了。

这是我的代码：

import React, { useState } from "react";
import {
    GeoapifyGeocoderAutocomplete,
    GeoapifyContext
} from "@geoapify/react-geocoder-autocomplete"; 
import "@geoapify/geocoder-autocomplete/styles/round-borders.css";

const API_KEY = "xxx";

export default function Autocomplete() {
    const [info, setInfo] = useState(null);

    function onPlaceSelect(data) {
        setInfo(data);
        console.log(info);
    }

    return (
        <div>
            <GeoapifyContext apiKey={API_KEY}>
                <GeoapifyGeocoderAutocomplete
                    placeSelect={onPlaceSelect}
                    placeholder="Ingresá una ciudad"
                    allowNonVerifiedHouseNumber={true}
                    allowNonVerifiedStreet={true}
                />
            </GeoapifyContext>
        </div>
    );
}

尝试过：卸载并重新安装，删除所有依赖项和package-lock.json并重新安装。 有人建议在 geoapify node_module 中注释一行，但这也不起作用 还尝试更改

useState

的开始位置（？），例如

const [info, setInfo] = useState("hello");

测试挂钩是否正常工作。它打印了“hello”，所以我认为

onPlaceSelect

可能从未被调用过？ 任何帮助将不胜感激

Answer 1

您可以使用 sendGeocoderRequestFunc 和 sendPlaceDetailsRequestFunc 属性访问您的搜索和返回的地理数据。

function sendGeocoderRequest(value, geocoder) {
  console.log(value); //the search term
  return geocoder.sendGeocoderRequest(value);
    
}

function sendPlaceDetailsRequest(feature, geocoder) {
  console.log(feature); // the result of the search
  return geocoder.sendPlaceDetailsRequest(feature);
}

<GeoapifyContext apiKey="<apikey>">
   <GeoapifyGeocoderAutocomplete
     placeholder="Enter address here"
     sendGeocoderRequestFunc={sendGeocoderRequest}
     sendPlaceDetailsRequestFunc={sendPlaceDetailsRequest}
   />
</GeoapifyContext>

在此处查看完整示例：https://github.com/geoapify/react-geocoder-autocomplete/blob/master/example/src/App.js

（在上面链接的示例中，我提到的 props 在 GeoapifyGeocoderAutocomplete 组件的最后一个实例中使用）