Проблема с React Google Maps API - неперехваченная ошибка типа: не удается прочитать свойство 'getCenter' с нулевым значением

#reactjs #google-maps #typeerror

#reactjs #google-карты #ошибка типа

Вопрос:

Я нашел этот пример в Codesandbox: https://codesandbox.io/s/ir5ks

Это очень похоже на то, что мне нужно для моего проекта, но я получаю ошибку, которую, похоже, не могу исправить. Я скопировал его точный код, за исключением последних двух строк, которые я изменил на экспорт по умолчанию, чтобы я мог импортировать его там, где это необходимо.

Когда я запускаю свое приложение React, оно просто возвращает пустой экран, а в консоли написано: Неперехваченная ошибка типа: не удается прочитать свойство ‘getCenter’ с нулевым значением в $ i.onCenterChanged (App.js:87)

что это за строка кода здесь: onCenterChanged={() => setCenter(mapRef.getCenter().toJSON())}

1. Я не могу воспроизвести проблему. И вы имеете в виду «последние две строки», которые вы удалили rootElement и ReactDOM из index.js которых, потому что вы не должны это удалять.

Ответ №1:

Сообщение об ошибке означает, что mapRef оно еще не назначено. Это удивительно, потому что об этом должен был позаботиться loadHandler . Вы должны изучить это, иначе вы столкнетесь с проблемами при попытке что-либо сделать с компонентом карты.
В любом случае, вы можете предотвратить ошибку, проверив перед доступом:

 onCenterChanged={() => mapRef amp;amp; setCenter(mapRef.getCenter().toJSON())}

1. После внесения изменений я получаю новую ошибку: неперехваченная ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate . React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы. Все, что я сделал, это npx-create-react-app и ничего не изменил, кроме добавления строки с: экспортировать приложение по умолчанию. В противном случае мой код в точности соответствует примеру из codesandbox (с изменениями из вашего ответа)

2. Как уже было сказано, ваш код звучит так, как будто у него есть несколько проблем. Пожалуйста, поделитесь песочницей с минимальным воспроизводимым примером, иначе помочь невозможно.

3. Я создал архив rar и загрузил его на свой Google диск: drive.google.com/file/d/1LSyUyJuZSYeGV_Xbfr0-NwyaEsNwETe4 /…

4. У меня нет доступа. Я предлагаю вам написать пример с нуля в онлайн-среде разработки, такой как codesandbox.io

5. Я не хочу загружать и извлекать архив от незнакомца в Интернете. Я уверен, что вы найдете свою ошибку. Счастливого кодирования!

Ответ №2:

Пример, который я нашел на sandcodebox.io использовал гораздо более старую версию пакета (хотя номер версии выглядит выше), и его пример не работает с самым последним @react-google-maps / api.

Когда я вернулся к версии 1.3.0 (той же, которую он использовал), тогда все работало так, как должно.

Спасибо Луи Куле за помощь.