接收以下错误，initMap不是一个函数。我试图不使用任何额外的软件包异步加载此脚本或Google Maps API。我试图控制日志initMap以查看脚本何时加载，但我仍然得到错误，它不是一个函数。我可以在componentDidMount之外或者甚至在App组件之外移动此函数，但错误是相同的。
我的猜测是它与脚本通过document.createElement加载的事实有关，但initMap函数不是，因为当我查看Google Maps API的其他示例时，它显示了API URL和initMap functoin在index.html页面上。
这个假设是否正确？有没有办法在React中轻松异步加载函数作为脚本或Google Maps API而不使用任何其他软件包？
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>事实上，正如Alexander Staroselsky注意到callback = initMap正在窗口中寻找一个函数initMap。您应该将initMap函数设置为global，或者将类中的initMap函数分配给window对象上的变量，如下所示：
window.initMap = this.initMap.bind(this);