관찰 가능에서 관찰자까지 간단한 배열을 전달하는 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}; 

그런 다음 두 번째 파일은 배열

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; 

위로 내보내집니다 : 은 본점는 클래스를 필요로 . 그런 다음 피터가 말했듯이 상점은 관찰자 수업의 소품으로 전달되어야합니다. 도움 주셔서 감사합니다.