反応するアプリケーションでJSグローバル変数を使用する方法

Question

私はJSのグローバル変数をindex.htmlのページに持っていますが、反応するJSアプリケーションでこの変数を呼び出す必要があり、結果をlocalstorageに保存してから反応アプリケーションから呼び出しようとしました、私は最初の時間は、ページをリフレッシュせずに値を持ってどのように私は、値を表示するページをリフレッシュする場合は、私は反応アプリでlocalstorageを呼び出すときに返される "null"値は初めてですか？

<script> 
var langObject=''; 

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

は、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をお勧めしたいと思います。

実際には、副作用はcomponentDidMountで行われることを推奨します。応答を取得してthis.setStateを使用して状態を設定すると、コンポーネントは自然に再レンダリングされるため、初期状態の問題が修正されます。あなたがしたいと思うのは、あなたの状態変数がヌル（初期状態）で、戻ってきたものを表示するときに、ローディングバーのようなものをレンダリングすることです。