Я новичок в React Native и очень новичок в MobX, понимая, что он мне нужен, только когда мой первый проект требовал динамического обновления и изменения свойств / хранилища между файлами.
Вот гитхаб проекта: https://github.com/Kovah101/GenreGeneratorv1
Я пытаюсь создать приложение, которое генерирует название случайного жанра музыки. Мой основной файл отображает все компоненты и имеет небольшой журнал console.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
event, которое генерирует массив случайных чисел, которые проверяются 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 поля, каждое с одним из случайных жанров из каждого массива. Однако я получаю неожиданные токены в '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
, я получу ошибку в конце строки математических манипуляций. Я, должно быть, что-то неправильно использую. Спасибо за любую помощь, я могу предоставить больше своего кода, но я не думаю, что проблема в таблице стилей или индексе.
this.props.randomStore.randomNumbers
в своем GenreSelector? Конечно, я не очень хорошо знаком с MobX, но если бы я отлаживал ваше решение, я бы в первую очередь посмотрел на него. - person Zany Cadence   schedule 09.11.2016var
иget
, решив этиUnexpected token
ошибки, но затемconsole.log
не распознается и не выделяет синий в возвышенном, поэтому я получаю еще одну ошибку на.
. Я попытался поместить какchosenrandom
, так иrandomGenres
в функцию рендеринга, и это помогает, я обновлю свойGenreSelector
, но теперь я получаюUnexpected token
в концеrandomGenres
- person KinectDeveloper23   schedule 09.11.2016console.log(chosenrandom)
после того, как вы объявилиchosenrandom
. Этот оператор журнала работает? Опять же, не очень знаком с MobX, в основном использую redux для состояния, но я всегда проверял, правильно ли передаются реквизиты в конструкторе, если бы я был в вашей ситуации. Не уверен, почему вы используетеthis.chosenrandom[]
, в этой области объявляется selectedrandom, не нужно использоватьthis
- person Zany Cadence   schedule 09.11.2016Unexpected token, expected ,
, поэтому он фактически не запускается, поэтому console.log не работает. Я обновил исходное сообщение и код вgenreSelector
. Я позвонилconsole.log(chosenrandom)
после объявленияchosenrandom
, но ошибка в строкеrandomGenres
сохраняется и препятствует запуску приложения - person KinectDeveloper23   schedule 09.11.2016randomGenres
объявление не является полным в размещенном здесь фрагменте. - person Zany Cadence   schedule 09.11.2016)
во всехMath.floor()
вызовах. Если это не поможет, я посмотрю позже сегодня / завтра и посмотрю, не смогу ли я это понять. - person Zany Cadence   schedule 10.11.2016)
, но он все равно не работает. Поэтому я решил перенести все вычисления и выбор жанра на кнопку и просто отправить массив в качестве опоры изgenreButton
вmainOriginal
, а затем обратно вgenreselector
. очень похоже на учебник codecademy react, который я сделал. Работает здесь: github.com/Kovah101/GenreGeneratorv2 - person KinectDeveloper23   schedule 13.11.2016