反应:将Window中的值设置为未定义

时间:2018-07-19 15:29:04

标签: javascript reactjs window-object

我正在我的HTML中为geoplugin设置脚本,将结果分配给窗口,并尝试访问组件中的变量。问题是,在组件中,我可以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方法来检索值,并最终将它们设置为state。

这是问题所在:我可以在控制台窗口中查看所有值,但是当我尝试用点号表示时,却无法定义。

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对象中访问它们即可。我已经研究了如何使用Window对象,但这不是问题,因为我可以在Window Object中看到变量。当我尝试使用它们时,它们只是变得不确定。我还尝试了ComponentWillMount甚至UNSAFE_componentWillMount(),但是由于我正在Window中检索变量,所以这不是问题。

关于React如何工作的任何想法使这成为问题,以及如何进入Window获取变量?

0 个答案:

没有答案