輸出入可観測MobX React Native

Question

私は最初のプロジェクトがファイル間で小道具/店舗を動的に更新および変更することを要求したときに必要なことを理解するだけで、React Nativeに新しく、MobXには初めてです。ここで

は、プロジェクトのgithubのです：https://github.com/Kovah101/GenreGeneratorv1

私は音楽のランダムなジャンルの名前を生成し、アプリケーションを構築しようとしています。 私のメインファイルはすべてのコンポーネントをレンダリングし、乱数が生成されていることを確認するために小さなconsole.logを持っています。私は次に、GenerateButtonは、乱数の配列を生成onClickイベントでボタンをレンダリングし、ここで

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import 
GenreSelector 
from './genreSelector'; 
import GenerateButton from './generateButton'; 
import styles from '../styles/styles'; 
import randomStore from './generateButton'; 


var MainOriginal = React.createClass ({ 

getInitialState() { 
    return { 
    chosenRandoms: [ , , ], 
    }; 
}, 

//used to check Generate button is working 
changeRandoms(newRandoms) { 
    this.chosenRandoms = newRandoms; 
    console.log('the console log works!'); 
    console.log(this.state.chosenRandoms); 
} , 

render(){ 
    return (
<View style={styles.container}> 
    <Text style= {styles.title}>Genre Generator</Text> 
    <Text style={styles.h2}>I am listening to</Text> 
    <View style={styles.genreContainer}> 
     <GenreSelector store={randomStore}/> {//passing randomStore as a prop to selector 
     }   
    </View> 
    <Text style={styles.h2}>You filthy casual</Text> 
    <GenerateButton onPress={this.changeRandoms}/> 
</View> 
    ); 
} 
}); 

module.exports = MainOriginal; 

すべてのエラーを得ることはありません、これらはmainOriginalによって確認し、正常に動作します。また、MobXを使用してrandomNumbersが常に更新され、最終ファイルgenreSelectorに渡されるので、それを観測することができます。

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

var GenerateButton = React.createClass({ 
generateRandoms: function() { 
    @observable randomNumbers = [Math.random(), Math.random(), Math.random()]; 
    this.props.onPress(randomNumbers); 
}, 
render: function(){ 
    return (
     <TouchableHighlight 
     onPress={this.generateRandoms} 
     style={styles.generateButton}> 
      <Text style={styles.generateButton}>Generate!</Text> 
     </TouchableHighlight> 
    ); 
    } 
}); 

const randomStore = new GenerateButton(); 
export default randomStore; 
module.exports = GenerateButton; 

genreSelectorを3箱、各アレイからのランダムなジャンルの一つとそれぞれのレンダリング、乱数のアレイは3つの異なるジャンルアレイのサイズにマップ使用すべきです。しかし、私は 'selectedRandoms'で予期せぬトークンを取得します。 'var'と 'get getRandomGenres'で再び同じ値に設定すると、私の理解は何かになる必要があります。

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import{ 
    genre1, 
    genre2, 
    genre3 
} from './genres.js'; 
import styles from '../styles/styles'; 
import {observer, computed} from 'mobx-react/native'; 
import randomStore from './generateButton'; 

const size = [genre1.length, genre2.length, genre3.length]; 

@observer 
class GenreSelector extends Component { 

     render() { 

    var chosenrandom = this.props.randomStore.randomNumbers; //accessing the passed state 

    console.log({chosenrandom}); 

    let randomGenres = [Math.floor(this.chosenrandom[0] * size[0], Math.floor(this.chosenrandom[1] * size[1], Math.floor(this.chosenrandom[2] * size[2]], 
    //manipulating the passed array -- ERROR AT END OF THIS LINE 
    return (
     <View style={styles.genreContainer}> 
      <Text style={styles.genreText} >{genre1[randomGenres[0]]}</Text> 
      <Text style={styles.genreText} >{genre2[randomGenres[1]]}</Text> 
      <Text style={styles.genreText} >{genre3[randomGenres[2]]}</Text> 
     </View> 
    ); 
    } 
} 
module.exports = GenreSelector; 

誰かが私が間違っていることに関するアイデアはありますか？私がvarとgetを出したら、数学操作ラインの最後にエラーが出ます。私は何かを悪用しているに違いない。任意の助けをありがとう、私は私のコードの多くを提供することができますが、私はスタイルシートやインデックスに問題があるとは思わない。

Answer 1

私はすべての計算とジャンルのピッキングをgeneratebuttonに入れて、ボタンから小道具としてmainOriginalに、次にgenreselectorに戻すことにしました。

MobXやそれ以上の複雑なものを使う必要はありませんでした。ここで

は、最終的なコードです：github.com/Kovah101/GenreGeneratorv2