MobX 将简单数组从可观察对象传递给观察者答案

【问题标题】：MobX passing simple array from observable to observerMobX 将简单数组从可观察对象传递给观察者
【发布时间】：2016-11-02 12:29:40
【问题描述】：

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

【问题讨论】：

你的主要应用代码在哪里？应该创建商店，然后在它的渲染中应该有和
老实说彼得，你是我的监护人。经过一段时间的修补，这让我找到了解决方案。您想将其发布为答案，我可以将其标记为正确。或者我可以发布完整的解决方案，以防有人遇到类似问题
作为答案发布。如果您有编辑权限，您可以根据需要添加代码

标签： arrays react-native mobx mobx-react

【解决方案1】：

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

编辑：主商店需要一个类：

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;

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

【讨论】：