React NativeとMobX：店は未定義です

Question

これは私が想像するよりも簡単な問題かもしれないので、これは私の最初のMobXの使い方ですが、試したことで何のエラーも出ません。私がそれを使用しようとするとどこでもストアは単に定義されていません。私は、ストアにコンポーネントを直接インポートして、メインファイルから小道具を渡すことも試みましたが、その場合でも、私がその権利を使用しているかどうかはわかりません。私はいくつかの異なる.babelrcファイル設定も実験しましたが、それは問題ではないようです。ここで

はUSERSTOREです：ここでは

import React from 'react'; 
 
import { observable } from 'mobx'; 
 

 
class UserStore { 
 
    @observable info = { 
 
    username: "bob", 
 
    password: "secret", 
 
    email: "bob@email.com" 
 
    } 
 
} 
 

 
const userStore = new UserStore() 
 
export default userStore;

が簡略化App.jsです：

import React, { Component } from 'react'; 
 
import { StyleSheet, Text, View } from 'react-native'; 
 
import Profile from './app/Profile.js'; 
 
import { UserStore } from './app/UserStore.js'; 
 

 
export default class App extends Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = { 
 
     page: 'Profile', 
 
    } 
 
    } 
 

 
    changePage(){ 
 
    switch (this.state.page) { 
 
     case "Profile": 
 
     return <Profile logout={this.logout.bind(this)} userStore={UserStore}/>; 
 
    } 
 
    } 
 

 
    render() { 
 
    return (
 
     <View> 
 
     {this.changePage()} 
 
     </View> 
 
    ); 
 
    } 
 
}

そして、ここでは単純化されたPですrofile.js：

import React, { Component } from 'react'; 
 
import { StyleSheet, Text, View, Button } from 'react-native'; 
 
import { observer } from 'mobx-react/native'; 
 

 
@observer 
 
export default class Profile extends Component { 
 

 
    render() { 
 
    console.log(this.props.userStore); 
 
    return (
 
     <View> 
 
     <Text>Profile Page</Text> 
 
     <Text>username: {props from store go here}</Text> 
 
     <Text>password: {props from store go here}</Text> 
 
     <Text>email: {props from store go here}</Text> 
 
     </View> 
 
    ); 
 
    } 
 
}

私はProfile.jsコンポーネントへのストアから事前に定義された観察可能な「情報」のオブジェクトを取得し、その情報を表示している今やろうとしているすべての。これははるかに難しいことです - どんな洞察力も大いにありがたいです！

Answer 1

あなたはUserStore.jsでexport default userStore;を宣言しているので

あなたが{}を除去することにより、App.jsにインポートする方法を変更してみてください：

import UserStore from './app/UserStore.js';

{}あなたがしたい場合にのみ必要です名前付きインポート。 Hereは、詳細を知りたい場合はお読みください。