Получение ниже ошибки, что initMap не является функцией. Я пытался не использовать какие-либо дополнительные пакеты для асинхронной загрузки этого скрипта или для API Карт Google.
Я пытался просто консоль журнала initMap, чтобы увидеть, когда скрипт загружен, но я все еще получаю сообщение об ошибке, что это не функция. Я могу переместить эту функцию за пределы componentDidMount или даже за пределы компонента App, но ошибка та же.
Я предполагаю, что это как-то связано с тем, что скрипт загружается через document.createElement, а функция initMap - нет, поскольку, когда я смотрю на другие примеры API Карт Google, он отображает как URL-адрес API, так и функция initMap на странице index.html.
Это предположение верно? Есть ли способ легко асинхронно загрузить функцию в виде скрипта или API Карт Google в React без использования других пакетов?
Uncaught Ib {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Ib (https://maps.googleapis.com/m…ZVRgF122wCkVf4P67Y&v=3.32&callback=initMap:163:56"}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render( < App / > , document.getElementById('root'));
registerServiceWorker();
import React, {
Component
} from 'react'
import './App.css'
let map;
export default class App extends Component {
componentDidMount() {
function initMap() {
console.log('loaded')
}
const script = document.createElement('script')
script.async = true
script.defer = true
script.src = "https://maps.googleapis.com/maps/api/js?key={myAPIkey}=3.32&callback=initMap"
document.head.appendChild(script)
}
render() {
return ( <
div > {
this.map
} <
div style = {
{
width: 500,
height: 500
}
}
id = "map" / >
<
/div>
)
}
}
body {
font-family: Arial, sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 500;
height: 500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React Map</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>