CODEWITHSUNDEEP
javascriptreactjsjsxreact-native
Railton
Railton

Reputation: 161

React-native global variable undefined

I am pretty new to React-native so go easy on me! :)

I'm creating an app which uses multiple large json objects for its core data which need to be accessible and updatable across multiple components. I have achieved this but found that data is only visible across components if I force the object to an array. i.e.

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

It works but I don't understand why so want to understand what's going on before building the app.

Thanks in advance for your help.

Sample code is below:

File: global.js

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

File: 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;

File: index.android.js

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);

Upvotes: 0

Views: 4734

Answers (1)

FMCorz
FMCorz

Reputation: 2706

In one case you are modifying an existing variable (by reference), in the other you're modifying the local value assignation.

When you import * as global from './global' you're effectively creating a local object pointing to the values exported from ./global, a bit as if you did:

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

Then, you're adding to the object defined as a1 under the property XX, this means that you are changing the original object. BUT when you do global.a2 = ... you're not changing the existing object, you're replacing the local reference of a2 to point to something else, that change will not leave your current module and that's why your select.js is not aware of your changes.

That being said, you will have problems with React if you change the content of your objects, rather you should be redefining them, but that's another topic you'll discover soon (immutability).

Upvotes: 2

Related Questions