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

这是一个简化的 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>
    );
  }
}

我现在要做的就是将预定义的可观察 "info" 对象从商店获取到 Profile.js 组件并显示该信息。这比它应该的要困难得多 - 非常感谢任何见解！

Answer 1

自从您在 UserStore.js

中声明 export default userStore;

尝试通过删除 {}:

来更改您在 App.js 中导入的方式

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

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

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

MobX with React Native: store is undefined

observable

react-native

mobx

mobx-react