React-nativeグローバル変数は定義されていません

Question

私はReact-nativeにはかなり新しいので、簡単に私に行ってください！ :)

私は、アクセス可能であり、複数のコンポーネント間で更新可能である必要がある、そのコアデータに複数の大きなjsonオブジェクトを使用するアプリケーションを作成しています。私はこれを達成しましたが、オブジェクトを配列に強制すると、データがコンポーネント間でしか見えないことがわかりました。すなわち

global.a1['XX']=data.movies; // This works fine 
global.a2=data.movies; // This is undefined in other components. 

これは機能しますが、なぜアプリケーションを構築する前に何が起こっているのか理解したくありません。

ご協力いただきありがとうございます。

サンプルコードは、以下である：

ファイル：global.js

var a1 = new Object(); 
var a2 = new Object(); 
module.exports = { a1, a2 } 

ファイル：select.js

'use strict'; 
import React, { Component,PropTypes } from 'react'; 
import { Text} from 'react-native'; 
import * as global from './global'; 
class Select extends Component { 
    render() { 
    console.log("a1:"+global.a1['XX'][0].title); // Ok 
    console.log("a2:"+global.a2[0].title); // Fails with undefined is not an object 
    return (<Text>{global.a1['XX'][0].title} {global.a2[0].title}</Text>); 
}} 
export default Select; 

ファイル：

var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'; 
var PARAMS = '?apikey=7waqfqbprs7pajbz28mqf6vz&page_limit=2'; 
import React, { Component,PropTypes } from 'react'; 
import { AppRegistry,Text} from 'react-native'; 
import * as global from './global'; 
import Select from './select'; 

class test extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {loaded: false}; 
    } 
    componentDidMount() { 
    fetch(API_URL+PARAMS) 
     .then((response) => { return response.json() }) 
     .then((responseData) => { return responseData; }) 
     .then((data) => { 
     global.a1['XX']=data.movies; 
     global.a2=data.movies; 
     this.setState({loaded: true}); 
     }) 
     .done(); 
    } 

    render() { 
    if (!this.state.loaded) { return (<Text>Loading...</Text>);} 
    console.log("a1:"+global.a1['XX'][0].title); // This works 
    console.log("a2:"+global.a2[0].title); // This works 
    return (<Text><Select/></Text>); 
    } 
} 
AppRegistry.registerComponent('test',() => test); 

Answer 1

index.android.js

あるケースでは、 n既存の変数（参照）、もう一方ではローカル値の割り当てを変更しています。

ときあなたはimport * as global from './global'あなたがやったかのようにあなたが効果的に、少し./globalからエクスポートした値を指しているローカルオブジェクトを作成している：

let global = { 
    a1: {}, 
    a2: {} 
} 

その後、あなたは下のa1として定義されたオブジェクトに追加していますプロパティXX、これは元のオブジェクトを変更していることを意味します。 global.a2 = ...で既存のオブジェクトを変更していない場合は、a2のローカル参照を置き換えて別のものを指し示すことになります。その変更は現在のモジュールを残さないため、select.jsは変更を認識しません。

あなたがオブジェクトの内容を変更した場合、Reactに問題があると言われています。再定義する必要がありますが、すぐに発見できる別のトピックです（不変）。