0

私は MobX を初めて使用し、ここで推奨されました。別のファイルに渡そうとしている単純な配列があります。私は多くのことを試しましたが、配列を this.props.store の形式で受け取ることができません。私の mobX の不適切な使用に光を当てていただければ幸いです。ありがとうございました。

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};

次に、2 番目のファイルで配列を監視する必要があります

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;
4

1 に答える 1

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;

上記のようにエクスポートされます。次に、Peter が言うように、ストアをオブザーバー クラスの props に渡す必要があります。助けてくれてありがとう。

于 2016-11-02T16:47:27.513 に答える