GeoapifyGeocoderAutocomplete placeSelect 属性在 React TypeScript 上不起作用

Question

我发现一个名为 @geoapify/react-geocoder-autocomplete 的免费 API 的自动完成地址组件可以在此 github 存储库中找到：https://github.com/geoapify/react-geocoder-autocomplete，其原始格式代码是用 React JavaScript 编写的，但我目前正在处理 React TypeScript，因此我尝试对其进行转换，但 placeSelect 属性无法正常工作，即使尝试将其写入 console.log 文本，但仍然没有在控制台上显示

这是用 React JavaScript 编写的原始代码 我已经测试过了，它工作得很好

    import React, { useState } from 'react'
    import { GeoapifyGeocoderAutocomplete, GeoapifyContext } from '@geoapify/react-geocoder-autocomplete'
    import '@geoapify/geocoder-autocomplete/styles/minimal.css'

    const App = () => {
      ...

      function onPlaceSelect(value) {
        console.log(value);
      }

      function onSuggectionChange(value) {
        console.log(value);
      }

      function preprocessHook(value) {
        return `${value}, Munich, Germany`
      }

      function postprocessHook(feature) {
        return feature.properties.street;
      }

      function suggestionsFilter(suggestions) {
        const processedStreets = [];

        const filtered = suggestions.filter(value => {
          if (!value.properties.street || processedStreets.indexOf(value.properties.street) >= 0) {
            return false;
          } else {
            processedStreets.push(value.properties.street);
            return true;
          }
        })

        return filtered;
      }

      return <GeoapifyContext apiKey="YOUR_API_KEY_HERE">

          <GeoapifyGeocoderAutocomplete
            placeSelect={onPlaceSelect}
            suggestionsChange={onSuggectionChange}
          />

          <GeoapifyGeocoderAutocomplete placeholder="Enter address here"
            value={value}
            type={type}
            lang={language}
            position={position}
            countryCodes={countryCodes}
            limit={limit}
            filterByCountryCode={filterByCountryCode}
            filterByCircle={filterByCircle}
            filterByRect={filterByRect}
            filterByPlace={filterByPlace}
            biasByCountryCode={biasByCountryCode}
            biasByCircle={biasByCircle}
            biasByRect={biasByRect}
            biasByProximity={biasByProximity}
            placeSelect={onPlaceSelect}
            suggestionsChange={onSuggectionChange}
          />

          <GeoapifyGeocoderAutocomplete
            placeSelect={onPlaceSelect}
            suggestionsChange={onSuggectionChange}
            preprocessHook={preprocessHook}
            postprocessHook={postprocessHook}
            suggestionsFilter={suggestionsFilter}
          />
        </GeoapifyContext>
    }

    export default App

这是修改并转换为React TypeScript代码

    import React from "react";
    import {
      GeoapifyGeocoderAutocomplete,
      GeoapifyContext,
    } from "@geoapify/react-geocoder-autocomplete";
    import "./addressinput.css";

    const AddressInput: React.FC = () => {
      const onPlaceSelect = (value: any) => {
        console.log(value);
      };

      const onSuggestionChange = (value: any[]) => {
        console.log(value);
      };

      return (
        <>
          <GeoapifyContext apiKey="API_KEY">
            <GeoapifyGeocoderAutocomplete
              placeSelect={onPlaceSelect}
              suggestionsChange={onSuggestionChange}
              filterByCountryCode={["ph"]}
            />
          </GeoapifyContext>
        </>
      );
    };

    export default AddressInput;

Answer 1

AddressInput 组件是否正在渲染？

const AddressInput: React.FC = () => {
  console.log("AddressInput component is being rendered");

};

验证上下文和组件属性是否正确传递：在修改后的 TypeScript 代码中，placeSelect 和 suggestChange 属性将传递给 GeoapifyGeocoderAutocomplete 组件。 GeoapifyGeocoderAutocomplete 组件中是否正确接收了这些道具？放入控制台日志行进行测试。

与 GeoapifyGeocoderAutocomplete 中的 value prop 相同。

暂时删除自定义样式文件 (./addressinput.css) 并查看 placeSelect 功能是否开始使用默认的最小样式。

您需要不断删除代码，直到某些内容起作用，然后慢慢添加回来。

Answer 2

这个问题你解决了吗？我面临着同样的问题。谢谢