如何在React App中使用JS全局变量

Question

我在index.html页面中有一个JS全局变量，我需要在react JS应用程序中调用此变量，我尝试将结果存储在localstorage中，然后从react应用程序调用它，这是我第一次返回“空”值在react应用程序中调用localstorage，但是如果我刷新页面显示的值，我如何在不刷新页面的情况下第一次获得该值？！

<script>
var langObject='';

$.getJSON('http://getJSON.com/en',    function(data) {
  langObject = data;
  localStorage.setItem('testObject',  JSON.stringify(data));
});
</script>

React App：

import React from 'react';
import { render } from 'react-dom';


class HomePage extends React.Component {
constructor(props){
    super(props);
    this.state={
        lang:localStorage.getItem('testObject'),
    }
}
render() {

return (

  <div className='home-page'>
    <h1>


      {/* {typeof langObject  +"  "}
      {  console.log( langObject )}} */}

    </h1>
  </div>
);
}
}

 export default HomePage;

或者是否有其他方法可以在称为React的渲染方法之前从服务器获取同步数据？

Answer 1

您是否在React中研究了生命周期方法？ 您可能需要一个诺言，因为您正在发出请求，而回复可能来得太迟。

但这可以帮助您理解，无论...

componentWillMount(){
   // Code to Execute before component renders
}

http://busypeoples.github.io/post/react-component-lifecycle/

Answer 2

您要问的是数据管理，有很多方法可以解决该问题。 全局var绝对不是走的路， localStorage会让您遇到麻烦，但这是正确的想法。 我建议在React生命周期方法中使用@ machiael-paccione提及的内容，在该方法中进行数据调用并将值存储在组件的状态中。

React实际上建议在componentDidMount完成副作用。 获得响应并使用this.setState设置状态this.setState ，组件自然会重新渲染，因此解决了该初始状态问题。 您想要做的是在状态变量为null（初始状态）时渲染诸如加载条之类的东西，并在返回时显示内容。