MobX将简单数组从observable传递给观察者

我是MobX的新手，并在此推荐它。我有一个简单的数组，我试图传递给另一个文件。我已经尝试了很多东西，但我无法接收this.props.store形式的数组如果你可以照亮一些我不正当使用mobX的灯光，它将不胜感激。谢谢。MobX将简单数组从observable传递给观察者

import React, { Component } from 'react'; 
import { 
    Alert, 
    AppRegistry, 
    StyleSheet, 
    Text, 
    TouchableHighlight, 
    View 
} from 'react-native'; 
import styles from '../styles/styles.js'; 
import {observable, extendObservable} from 'mobx'; 

//unsure why below code wont work, when trying to export it throws error: object is not a constructor (evaluating 'new rNumStore()') 
// const rNumStore = observable([1,2,3]); 

// a couple of other options both i am unsure why they do not work 
// class rNumStore { 
// extendObservable(this, { 
// rNumbers: [1,2,3]}); 
// } 
// class rNumStore { 
// observable({rNumbers: [1,2,3]}); 
// } 

//Current best working solution below 
var rNumStore = function(){ 
    extendObservable(this, { 
     rNumbers: [1,2,3] 
    }); 
} 


var Button = React.createClass({ 
    rNumberGen: function(){ 

     store.rNumbers = [Math.random(), Math.random(), Math.random()]; 

     var a = store.rNumbers[0].toString(); 
     var d =store.rNumbers.toString(); 
     Alert.alert(a, d); 
     //this alert gives mobxArray of random numbers 
    }, 

    render: function(){ 
     return(
       <TouchableHighlight onPress={this.rNumberGen} style= {styles.center}> 
         <Text style={styles.button}>Generate!</Text> 
       </TouchableHighlight> 
      ); 
    } 

}); 

var store = new rNumStore; 
export default store; 

export {Button};

然后第二个文件需要观察阵列

import React, { Component } from 'react'; 
import { 
    Alert, 
    AppRegistry, 
    StyleSheet, 
    TouchableHighlight, 
    Text, 
    View 
} from 'react-native'; 
import{ 
    genre1, 
    genre2, 
    genre3 
} from './genres.js'; 

import styles from '../styles/styles.js'; 

import {observer} from 'mobx-react/native'; 


var Genre = observer(React.createClass({ 

    alert: function(){ 
     //below does not cause an error. 
     var a = this.props.store; 
     //undefined ins not an object(evaluating 'this.props.store.rNumbers') 
     // have tried making 'a' a state : this.props.store.rNumbers same error occurs at that point 
     var b = this.props.store.rNumbers[1]; 
     var c = b.toString(); 
     Alert.alert('this is', c); 

    }, 
    render: function(){ 
     let genre = this.props.selected; 
     return(
      <TouchableHighlight onPress={this.alert}> 
       <View style={styles.genre}> 
        <Text style={styles.center}>{genre}</Text> 
       </View> 
       </TouchableHighlight> 
      ); 
    }, 
})); 



module.exports = Genre;

来源

2016-11-02 onAsilver road

你的主应用程序代码在哪里？应该创建商店，然后在它的渲染中它应该有和

老实说Peter，你是我的监护人。经过一段时间的修补，这让我的解决方案。你想发布它作为答案，我可以标记它是正确的。或者我可以发布一个完整的解决方案，以防任何人有类似的问题 –

发布作为答案。如果您有编辑权限，则可以根据需要添加代码 –

哪里是你的主应用程序代码？这应该创建存储，然后在它的渲染它应该有，并且你通过商店为属性标签

编辑：主力店需要等级：

class rNumStore { 
    rNumbers = observable([1,2,3]) 

    rNumGen() { 
    this.rNumbers = [Math.random(), Math.random(), Math.random()] 
    //Alert.alert('this is', rNumbers.toString()) 
    } 
} 

class Main extends React.Component { 
    render(){ 
    return(
     <View style={styles.container}> 
      <Text style={styles.title}>Genre Genrerator</Text> 

      <Text style={[styles.h2, styles.h21]}>I am listening to</Text> 
      <View style={styles.genreContainer}> 
       <Genre store={store} selected='{genre[1]}'/> 
       <Genre store={store} selected='{genre[2]}'/> 
       <Genre store={store} selected='{genre[3]}'/> 
      </View> 
      <Text style={styles.h2}>You filthy casual</Text> 
      <Button store={store}/> 
     </View> 
    ); 
    } 
} 


var store = new rNumStore; 
export default store; 
module.exports = Main;

其导出为以上。然后，正如彼得所说，商店需要被传递给观察员班级的道具。感谢您的帮助。

来源

2016-11-02 16:47:27

MobX将简单数组从observable传递给观察者

回答

相关问题