2016-11-02 70 views
0

我是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; 
+0

你的主應用程序代碼在哪裏?應該創建商店,然後在它的渲染中它應該有

+0

老實說Peter,你是我的監護人。經過一段時間的修補,這讓我的解決方案。你想發佈它作爲答案,我可以標記它是正確的。或者我可以發佈一個完整的解決方案,以防任何人有類似的問題 –

+0

發佈作爲答案。如果您有編輯權限,則可以根據需要添加代碼 –

回答

0

哪裏是你的主應用程序代碼?這應該創建存儲,然後在它的渲染它應該有,並且你通過商店爲屬性標籤

編輯: 主力店需要等級:

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; 

其導出爲以上。 然後,正如彼得所說,商店需要被傳遞給觀察員班級的道具。 感謝您的幫助。

相關問題