带有 React Native 的 MobX：存储未定义

Question

这是我第一次使用 MobX，所以这可能是一个比我想象的更简单的问题，但我尝试过的东西没有任何错误；无论我在哪里尝试使用商店，商店都是未定义的。我试过将商店直接导入组件并从主文件传递道具（也使用 ，但我不确定我是否正确使用）。我也尝试了几种不同的 .babelrc 文件设置，但这似乎不是问题。

这是用户存储：

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

这是一个简化的 Profile.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

由于您export default userStore;在 UserStore.js 中声明

尝试通过删除以下内容来更改您在 App.js 中的导入方式{}：

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

{}仅当您想要进行命名导入时才需要。如果您想了解更多，这里是一个很好的阅读。