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;

文件：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);

Answer 1

在一种情况下，您正在修改现有变量（通过引用），在另一种情况下，您正在修改局部赋值。

当您 import * as global from './global' 时，您实际上是在创建一个指向从 ./global 导出的值的本地对象，有点像您所做的那样：

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

然后，您将添加到属性 XX 下定义为 a1 的对象，这意味着您正在更改原始对象。但是，当您执行 global.a2 = ... 时，您并没有更改现有对象，而是将 a2 的本地引用替换为指向其他内容，该更改不会离开您当前的模块，这就是为什么您的 select.js 不知道您的更改。

也就是说，如果您更改对象的内容，您将遇到 React 问题，而不是您应该重新定义它们，但这是您很快就会发现的另一个主题（不变性）。

React-native 全局变量未定义

React-native global variable undefined

javascript

reactjs

react-native

jsx

react-native-android