0

我在我的 HTML 中为地理插件设置脚本，将结果分配给窗口，并尝试访问组件中的变量。问题是，在组件中，我可以 console.log(window) 并查看变量，但任何点符号都会导致未定义。

这是我的 HTML 中的脚本：

<script type="text/javascript">
   setupGeo = (o) => {
     //This is one way I've tried it, setting a Geo object
     window.Geo = {};
     Geo.geoplugin_city = o.city;
     Geo.geoplugin_region = o.region;
     console.log(Geo.geoplugin_city); //works and returns my city
     console.log(Geo.geoplugin_region); //works and return my state

     //This is a second way I've tried it, assigning it to a function that 
        //returns the variable
     window.geoplugin_latitude = function() { return o.lat; };
     window.geoplugin_longitude = function() { return o.lon; };
     console.log(window.geoplugin_longitude); //returns function
     console.log(window.geoplugin_longitude); //return function 
   }
</script>
<script type="text/javascript" src="//extreme-ip-lookup.com/json/? 
  callback=setupGeo" async></script>

如您所见，脚本按预期工作。我尝试了两种不同的方法，并将它们都作为示例。

在我的 React 组件中，我使用 ComponentDidMount 方法来检索值并最终将它们设置为状态。

这就是问题所在：我可以控制台窗口并查看所有值，但是当我尝试在其中添加点符号时，我得到了未定义。 

componentDidMount() {

    console.log('componentmounted', window)
    // Window ...{Geo:{geoplugin_city: "MyCity", geoplugin_region: "MyState"}}
    // ...geoplugin_latitude: f() ... geoplugin_longitude: f()

    console.log('componentmounted', window.Geo) // undefined
    console.log('componentmounted', window.geoplugin_latitude) //returns 
      //function
    console.log('componentmounted', window.geoplugin_latitude()) //gives error 
      //that window.geoplugin_latitude isn't a function
}

所以，我可以看到我需要的窗口变量，我可以在 Window 对象中访问它们。我已经研究过如何使用窗口对象，但这不是问题，因为我可以看到窗口对象中的变量。当我尝试使用它们时，它们只是变得不确定。我也尝试过使用 ComponentWillMount 甚至 UNSAFE_componentWillMount()，但这些都不是问题，因为我正在检索 Window 中的变量。

关于 React 如何工作的任何想法都会导致这个问题，以及我如何进入 Window 来获取变量？

4

0 回答 0