反应谷歌位置不适用于钩子

Question

我在我的项目中尝试使用react google api。我在Google Cloud中创建了计数，并且具有api。 我有以下代码：

import { GoogleComponent } from "react-google-location";
export default function Home() {

  const API_KEY_GOOGLE = "XXXXX";
  return (
    <div className="home">
      <h1>GHome</h1>

      <div>
        <GoogleComponent
          apiKey={API_KEY_GOOGLE}
          language={"en"}
          country={"country:in|country:us"}
          coordinates={true}
          //   locationBoxStyle={"custom-style"}
          //   locationListStyle={"custom-style-list"}
          onChange={e => {
            setPlace({ place: e });
          }}
        />
      </div>
    </div>
      );
}

并显示在控制台中：

Answer 1

例如，如果应用程序不包含其他任何部分，例如<ul>和<li>组合，或者使用map()生成其他HTML元素而未添加key属性，例如那么问题很可能与传递的country属性有关。

基于react-google-location的文档：

使用多种语言

在国家对象中传递键和值对，如下所示：

country={in|country:pr|country:vi|country:gu|country:mp}

您的country属性具有{"country:in|country:us"}。也许值得进行以下测试：

<GoogleComponent
    apiKey={API_KEY_GOOGLE}
    language={"en"}
    country={"in|country:us"}
    coordinates={true}
    onChange={e => {
       setPlace({ place: e });
    }} />

或者我的第二个猜测：

<GoogleComponent
    apiKey={API_KEY_GOOGLE}
    language={"en"}
    country={"in|country:in|country:us"}
    coordinates={true}
    onChange={e => {
       setPlace({ place: e });
    }} />

希望对您有帮助！