React TypeScript中@geoapify/react-geocoder-autocomplete的placeSelect属性失效

问题概述 #

@geoapify/react-geocoder-autocomplete组件的React JavaScript版本中，placeSelect回调能正常触发并输出日志，但转换为React TypeScript后，该回调完全无响应，console.log没有任何输出。

核心原因与解决思路 #

TypeScript的类型约束是关键问题：直接用any作为回调参数类型，可能导致组件无法识别回调函数的正确签名，进而不触发回调。需要使用组件提供的官方类型定义来匹配参数类型。

修复后的代码示例 #

import React from "react";
import {
  GeoapifyGeocoderAutocomplete,
  GeoapifyContext,
  Place // 导入组件官方类型
} from "@geoapify/react-geocoder-autocomplete";
// 必须导入组件样式，否则可能影响交互逻辑
import "@geoapify/geocoder-autocomplete/styles/minimal.css";

const AddressInput: React.FC = () => {
  // 使用组件提供的Place类型替代any
  const onPlaceSelect = (value: Place) => {
    console.log(value);
  };

  // suggestionsChange回调参数为Place数组类型
  const onSuggestionChange = (value: Place[]) => {
    console.log(value);
  };

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

export default AddressInput;

额外检查项 #

• 样式文件导入：原JS代码依赖组件自带样式，TS版本若替换为自定义样式，需确保未破坏建议项的点击事件绑定逻辑。
• API Key有效性：虽然JS版本正常，仍需确认TS版本的API Key配置正确。
• 组件版本兼容性：确保@geoapify/react-geocoder-autocomplete版本支持TypeScript，若需额外类型定义，可安装对应的@types包。

内容的提问来源于stack exchange，提问作者raks