[英]React-native global variable undefined
我对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);
在一种情况下,您正在修改现有变量(通过引用),在另一种情况下,您正在修改局部值分配。
当您import * as global from './global'
是在创建一个指向./global
导出的值的本地对象,有点像您这样做:
let global = {
a1: {},
a2: {}
}
然后,将在属性XX
下添加到定义为a1
的对象,这意味着您正在更改原始对象。 但是当您执行global.a2 = ...
您没有更改现有对象,而是要替换a2
的本地引用以指向其他对象,那么更改不会离开当前模块,这就是为什么select.js
不知道您的更改。
话虽如此,如果您更改对象的内容,那么React就会遇到问题,而应该重新定义它们,但这是很快就会发现的另一个主题(不变性)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.