Реагировать местоположение Google не работает с крючками

Question

Я пробовал реагировать API Google в моем проекте. Я создал счетчик в 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> или генерируются другие элементы HTML с map() без добавленного атрибута 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 });
    }} />

Надеюсь, это поможет!