MobXがオブザーバブルからオブザーバにシンプルな配列を渡す

Question

私はMobXを初めて使っていて、ここでそれをお勧めしました。 私は別のファイルに渡そうとしている単純な配列を持っています。 私は多くのことを試しましたが、私はthis.props.storeの形で配列を受け取ることができません 私がmobXの私の不適切な使用についていくらかの光を照らすことができれば、それは非常に高く評価されるでしょう。ありがとうございました。

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

次に2番目のファイルがメインのアプリのコードがある場合は、アレイ

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; 

Answer 1

を観察する必要がありますか？それはそれは持っているとあなたが財産として店舗を渡すタグする必要があり、それをレンダリングだ、その後に、ストアを作成する必要があり

編集：

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; 

上記のようにエクスポートされます。 はメインストアは、クラスを必要とします。 そして、ピーターが言うように、店はオブザーバークラスの小道具に渡される必要があります。 助けてくれてありがとう。