MobX 将简单数组从 observable 传递给观察者

Question

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

那么第二个文件需要观察数组

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;

Answer 1

您的主要应用程序代码在哪里？那应该创建商店，然后在它的渲染中它应该具有您将商店传递给的标签作为属性

编辑：总店需要 class:

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;

如上导出。然后正如彼得所说，商店需要传递到观察者 classes 的道具中。感谢您的帮助。

MobX 将简单数组从 observable 传递给观察者

MobX passing simple array from observable to observer

arrays

react-native

mobx

mobx-react