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

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

Answer 1

因为您在UserStore.js

中声明了javac

尝试删除export default userStore;：

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

{}

仅当您要进行命名导入时才需要

import UserStore from './app/UserStore.js';。如果你想了解更多，Here是一本很好的读物。

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

1 个答案: