Question

我在index.html页面中有一个JS全局变量，我需要在反应JS应用程序中调用此变量，我试图将结果存储在localstorage中，然后从react app调用它，这是第一次“null”值当我在react app中调用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;

OR有没有其他方法可以在反应渲染方法之前从服务器获取同步数据？

Answer 1

您是否研究过React中的生命周期方法？您可能需要一个承诺，因为您提出请求并且响应可能来得太晚。

然而，无论如何，这可能会帮助您理解......

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

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

Answer 2

您要问的是数据管理，有很多方法可以解决这个问题。绝对不是全球变种，localStorage会让你陷入困境，但这是正确的想法。我推荐使用React生命周期方法提到的@ machiael-paccione，在那里进行数据调用并将值存储在组件的状态中。

React实际上建议在componentDidMount中完成副作用。一旦获得响应并使用this.setState设置状态，组件将自然地重新呈现，从而修复该初始状态问题。当你的状态变量为空（初始状态）时，你想要做的就是渲染像加载栏这样的东西，并在你找回它之后显示东西。

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

2 个答案: