Question

我正在尝试在我的React项目中使用react-places-autocomplete。它要求使用Google Maps JavaScript API。我使用以下代码将其包括在内：

componentDidMount() {
    const googleMapsScriptEl = document.createElement('script');
    googleMapsScriptEl.src = 'https://maps.googleapis.com/maps/api/js?key=APIKey&libraries=places';

    document.head.appendChild(googleMapsScriptEl);
}

通过在DevTools中进行检查，我可以看到带有src的script标签已添加到<head>中，但是react-places-autocomplete仍然不起作用，该页面无法加载并给了我此错误：

Error: [react-places-autocomplete]: Google Maps JavaScript API library must be loaded.

但是，如果我直接将此行添加到<head>的{{1}}中，该库将起作用：

./public/index.html

有帮助吗？

编辑：已添加原始代码（基本上是<script src="https://maps.googleapis.com/maps/api/js?key=APIKey&libraries=places"></script>的{{3}}）：

react-places-autocomplete

Answer 1

您要将googleMapsScriptEl定义为const，然后尝试将其添加为src。 'const'类型的变量是不可变的。尝试使用let或var。

Answer 2

您必须将其作为脚本标签添加到HTML中。

Answer 3

原始代码：

<script src="https://maps.googleapis.com/maps/api/js?key=APIKey&libraries=places"></script>

更正：

<script src="https://maps.googleapis.com/maps/api/js?key=APIKey&libraries=places" />

反应：添加脚本标签到头，但仍然无法正常工作？

3 个答案: