导出和导入 observable MobX React Native答案

【问题标题】：Export and import observable MobX React Native导出和导入 observable MobX React Native
【发布时间】：2016-11-07 15:04:30
【问题描述】：

我是 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 呈现一个带有onClickevent 的按钮，该事件生成一个随机数数组，这些随机数由mainOriginal检查并正常工作。我还使用 MobX 使 randomNumbers 可观察，因为它会不断更新，并将传递到最终文件 @987654326@。

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 个不同流派数组的大小，然后渲染 3 个框，每个框都有每个数组中的一种随机流派。但是，如果我将其设置为 'var' 并在 'get randomGenres' 中再次设置相同的值，我会在 'chosenRandoms' 处得到意想不到的标记，我的理解是它们需要成为一些东西。

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 取出，那么我在数学操作行的末尾会出现错误。我一定是在滥用什么东西。感谢您的帮助，我可以提供更多代码，但我不认为问题出在样式表或索引中。

【问题讨论】：

您可以在您的流派选择器中注销this.props.randomStore.randomNumbers 吗？诚然，我对 MobX 不是很熟悉，但如果我正在调试您的解决方案，那是我首先要看的地方。
不幸的是，我不能，取出var 和get 解决了那些Unexpected token 错误，但随后console.log 无法识别并且没有在崇高中突出蓝色所以我在@987654336 上遇到另一个错误@ 我尝试将 chosenrandom 和 randomGenres 都放在渲染函数中，这会有所帮助，我将更新我的 GenreSelector 但现在我在 randomGenres 末尾得到一个 Unexpected token
在您声明 chosenrandom 后，我没有看到 console.log(chosenrandom)。此日志语句是否有效？同样，对 MobX 不是很熟悉，主要使用 redux 作为状态，但如果我遇到你的情况，我总是会检查 props 是否在构造函数中正确传递。不知道你为什么要使用this.chosenrandom[]，在这个范围内声明了chooserandom，不应该使用this
我仍然得到一个错误代码Unexpected token, expected , 所以它实际上并没有运行，所以console.log 不起作用。我在genreSelector 中更新了我的原始帖子和代码。我在声明chosenrandom 后调用了console.log(chosenrandom)，但randomGenres 行上的错误持续存在并阻止应用程序运行
你有一个 github 上面有这个代码，所以我可以看到它吗？因为我看到您的randomGenres 声明在此处发布的 sn-p 中不完整。

标签： arrays react-native prop mobx mobx-react

【解决方案1】：

所以我决定将所有计算和类型选择放到generatebutton，然后将数组作为道具从按钮发送到mainOriginal，然后返回到genreselector。

不必使用 MobX 或任何过于复杂的东西。

这里是最终代码：github.com/Kovah101/GenreGeneratorv2

【讨论】：