Javascript 尝试使用React.js动态加载脚本时出现未定义错误

对于我正在进行的项目，我制作了一个React应用程序，该应用程序基于在单击某个国家时显示信息。我正在使用simplemaps.com（）中的SVG世界地图，它附带javascript挂钩来处理用户点击，例如

<script type="text/javascript"> 
   simplemaps_worldmap.hooks.click_state = function(id){
     alert(simplemaps_worldmap_mapdata.state_specific[id].name);
   }
</script>

我开始收到错误：

ReferenceError:simplemaps\u worldmap未定义

。 当加载到HTML页面时，它会按预期工作，如下所示：

<script src="./scripts/mapdata.js"></script>
<script src="./scripts/worldmap.js"></script>
<script type="text/javascript"> 
   simplemaps_worldmap.hooks.click_state = function(id){
     alert(simplemaps_worldmap_mapdata.state_specific[id].name);
   }
</script>

simplemaps\u worldmap.hooks.click\u state=函数（id）{
警报（simplemaps\u worldmap\u mapdata.state\u特定[id].name）；
}

然而，当它被动态加载时，它似乎破坏了它。我试着在头部和身体都装上它们，但似乎没有什么不同

总结一下问题：脚本在HTML中运行良好，但在javascript中加载时，clickScript似乎无法找到mapData.js来引用它，即使worldData.js可以找到mapData.js。我尝试将clickScript设置为外部，但这似乎无法解决问题

抱歉，如果这是一个明显的修复，但任何帮助将不胜感激

---

编辑：，

页面加载后，SimpleMaps脚本将查找

id=“map”

元素，并在其中呈现一个映射。重新渲染组件时，贴图将被删除（因为渲染的是空div）。实际上，您要做的是强制SimpleMaps重新初始化映射。重新加载脚本是不必要的，因为它们已经存在

我无法创建一个工作版本，因为我没有SimpleMaps的许可证，但我可能会这样做，这是基于我在关于手动加载的文章中读到的内容

在mapdata.js中

main_settings.auto_load='no';

在React组件中：

import React, {useEffect} from 'react';

function Map() {

    useEffect(() => {
      
      simplemaps_worldmap.load();

    }, []);

    return (
        <div id="map"></div>
    )
}

export default Map;

import React，{useffect}来自“React”；
函数映射（）{
useffect（（）=>{
simplemaps_worldmap.load（）；
}, []);
返回(
)
}
导出默认地图；

“当我点击另一个页面并点击后退时”-点击后退是什么意思？页面是被重新加载的，还是一个单页应用程序？@RichardHunter这是一个单页应用程序，我使用react router dom在“页面”之间导航。当我点击到另一个“页面”并点击后退时，地图不会呈现。如果我刷新网页，它会呈现，但我一直在尝试避免这种情况，以使其看起来无缝。如果我理解正确，SimpleMaps脚本在页面加载时会查找

id=“map”

元素并将贴图呈现到其中。但是当您重新渲染组件时，它当然会被删除（因为您渲染的是一个空div）。因此，您真正想要做的是强制SimpleMaps重新初始化。重新加载脚本是不必要的，因为它们已经存在。simplemaps没有重新初始化的方法吗？我在文档中看到了一个

simplemaps\u worldmap.load（）

方法。您可以在useffect（）钩子中尝试，这也可能很有用。手动加载地图而不是让SimpleMap处理事情可能是个好主意。

const clickScript = document.createElement('script');

clickScript.type = "text/javascript";
clickScript.innerHTML = `simplemaps_worldmap.hooks.click_state = function(id){
    alert(simplemaps_worldmap_mapdata.state_specific[id].name);
};`

document.body.appendChild(clickScript);
    
return () => {
    document.body.removeChild(clickScript);
}

<script src="./scripts/mapdata.js"></script>
<script src="./scripts/worldmap.js"></script>
<script type="text/javascript"> 
   simplemaps_worldmap.hooks.click_state = function(id){
     alert(simplemaps_worldmap_mapdata.state_specific[id].name);
   }
</script>

main_settings.auto_load='no';

import React, {useEffect} from 'react';

function Map() {

    useEffect(() => {
      
      simplemaps_worldmap.load();

    }, []);

    return (
        <div id="map"></div>
    )
}

export default Map;