Экспорт и импорт наблюдаемых MobX React Native

Question

Я новичок в React Native и очень новичок в MobX, только осознавая, что мне это нужно, когда мой первый проект требовал динамического обновления и изменения реквизита/хранения между файлами.

Вот GitHub проекта: https://github.com/Kovah101/GenreGeneratorv1

Я пытаюсь создать приложение, которое генерирует имя случайного жанра музыки. Мой основной файл отображает все компоненты и имеет небольшую консоль.log, чтобы проверить, генерируются ли случайные числа. Я не получаю ошибки здесь

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; 

Далее GenerateButton оказывает кнопку с onClick события, которое генерирует массив случайных чисел, эти проверяйтесь 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 randomGenres», я понимаю, что они должны быть чем-то.

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