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

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

MobX将简单数组从observable传递给observer

1 个答案: