0

私は React Native を初めて使用し、MobX を初めて使用しましたが、最初のプロジェクトでファイル間で props/store を動的に更新および変更する必要があったときに必要であることに気付きました。

プロジェクトの github は次のとおりです: 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乱数の配列を生成するイベントでボタンをレンダリングします。これらはチェックされmainOriginal、正しく機能します。randomNumbersMobXは常に更新され、最終的なファイルに渡されるため、監視可能にするためにも MobX を使用します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 つの異なるジャンル配列のサイズにマップし、次に、各配列からランダムなジャンルの 1 つをそれぞれ含む 3 つのボックスをレンダリングする必要があります。ただし、「chosenRandoms」で「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と、数学操作行の最後でエラーが発生します。私は何かを悪用しているに違いない。助けてくれてありがとう、もっと多くのコードを提供できますが、スタイルシートまたはインデックスに問題があるとは思いません。

4

1 に答える 1