标签: mobx

我们使用 mobx-react-form ( https://github.com/foxhound87/mobx-react-form ) 作为我们的表单。我们的一种表格有一个多选下拉菜单。根据选择，在表单中添加/删除字段。这如何以 mobx-react-form 进行管理？

我目前正在尝试实现一个 mobx 存储，我可以像这样从任何地方调用它：

import {userStore} from '../UserStore.js';

在文件末尾，我的导出功能如下所示：

const userStore = new UserStore();
export {userStore};

据我了解，每次调用该import功能时，都会重新创建该对象，其中导入 UserStore 的多个文件不共享相同的变量。

但是，我希望UserStore导入的每个文件都使用完全相同的变量导入相同的对象。我怎样才能做到这一点？我不完全确定如何实现，因此将不胜感激任何想法和示例:)

完整代码（用于 UserStore.js 声明），如果有帮助，如下（查看最底部的 export 语句）

import {observable, computed, action} from 'mobx';
import {ObservableMap, toJS} from 'mobx';
import {Fb} from './firebase.js';

class UserStore {

  /** GPS */
  @observable usrLng = 0.0;
  @observable usrLat = 0.0;
  @observable watchID = null;

  @action
  watchCurLocation() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      console.log("Recording GPS data from within the Store!!");
      this.usrLat = parseFloat(position.coords.latitude);
      this.usrLng …

我的 Store.js：

import { observable, useStrict, action } from 'mobx';

useStrict(true);

export const state = observable({

    contacts: []

});

export const actions = {

    addContact: action((firstName, lastName) => {
        state.contacts.push({
            id: Math.floor((Math.random() * 1000) + 1),
            firstName: firstName,
            lastName: lastName
        });
    })

};

我的 index.js：

import React from 'react';
import { Provider } from 'mobx-react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { state, actions } from './Store';

ReactDOM.render(
    <Provider state={state} actions={actions}> …

我是 React 和 Mobx 的新手，所以我尝试做一个小应用程序。当我尝试运行它时，我收到错误：Uncaught TypeError: _releasesState2.default is not a constructor. 因为我不知道问题是什么，所以我要猛烈抨击我的头。这是我到目前为止所得到的：

我的 index.js：

import React from "react";
import ReactDOM from "react-dom";

import Releases from "./components/releases";

class App extends React.Component {
  constructor() {
    super();
  } 
  render() {
    return (
        <div>
           <Releases />
        </div>
     )
  }
}

ReactDOM.render(<App/>, window.document.getElementById("app"));

release.js：

import React from "react";
import { observer } from "mobx-react";

import ReleaseState from "./releases-state";

@observer
export default class Releases extends React.Component {
   constructor() {
     super();

    this.state = new ReleaseState(); …

If I push a class instance into an observable array in MobX then it is not observed. However if I push a literal object into an observable array then it will be observed.

The docs for observable arrays say that

"all (future) values of the array will also be observable"

so I am trying to understand why this happens.

For example the following code can be run in node:

let mobx = require('mobx');

class TodoStore {
  constructor() {
    this.todos = …

当用户选择语言时，我试图在运行时更改我的应用程序的语言。我正在尝试这样做

import I18n from 'react-native-i18n'

onChangeLanguage = () => {
    console.log('String before change : >>> ', I18n.t('welcome'))
    I18n.locale = 'hi'
    console.log('String after change : >>> ', I18n.t('welcome'))
}

在两个日志中，我得到了相同的 string 。我从这里参考。在此参考中，有一个使用 redux 的示例，但我的用例是使用 mobx。如果语言更改了如何重新渲染组件以反映语言更改。

我需要在 React Native 中保留一个 MST Store。数据很少更改。

我对使用 AsyncStorage 和 AutoRun 感到困惑。

我有一个 React 组件，它接收用户名和密码并将其发送以进行身份​​验证。如果身份验证成功，页面应该移动到呈现另一个组件的不同路由。

现在的问题是，我不确定如何从我的商店更改路线？即不使用<Link>React Router的组件？我知道我们可以使用this.props.history.push(/url)以编程方式更改路由，但它只能在 React 组件中使用 using <Route>，而不能在商店中使用。

我使用 React16 和 MobX 进行状态管理，使用 ReactRouter V4 进行路由。

店铺：

class Store {
    handleSubmit = (username, password) => {
        const result = validateUser(username, password);
        // if result === true, change route to '/search' to render Search component
    }
}

登录组件：

const Login = observer(({ store }) => {
    return (
        <div>
           <form onSubmit={store.handleSubmit}>
                <label htmlFor="username">User Name</label>
                <input type="text" id="username" onChange={e => store.updateUsername(e)} value={store.username} />
                <label htmlFor="password">Password</label>
                <input …

从Redux切换到MobX for React后,我开始非常喜欢MobX.这太棒了.

如果在渲染中未使用提供的商店observable,则MobX具有某种行为,它不会更新组件.我认为通常这是一个非常好的行为,只有在实际发生了变化时才会使组件呈现.

但是......我确实遇到过几种我不想要或者需要在渲染方法中使用MobX observable的情况,在这种情况下我this.props.store的MobX存储不会更新.

在这种情况下,作为一种解决方法,我只是在render方法中引用observable,但我认为这不是一个非常干净的方法,我想知道是否有更简洁的方法来做到这一点？

这个组件代码应该更多地解释我正在询问的内容.它是一个基于我在商店中拥有的MobX observable来改变体溢出样式的组件.

/*------------------------------------*\
  Imports
\*------------------------------------*/
import React from 'react';
import connectStore from 'script/connect-store';
import addClass from 'dom-helpers/class/addClass';
import removeClass from 'dom-helpers/class/removeClass';


/*------------------------------------*\
  Component
\*------------------------------------*/
class Component extends React.Component {

  constructor(props) {
    super(props);
    this.constructor.displayName = 'BodyClassSync';
  }

  componentDidMount() {
    this.checkAndUpdateMuiClass();
  }

  componentDidUpdate() {
    this.checkAndUpdateMuiClass();
  }

  checkAndUpdateMuiClass() {

    // This place is the only place I need latest MobX store... 
    if (this.props.store.muiOverlay) {
      addClass(window.document.body, 'mod-mui-overlay');
    }

    else {
      removeClass(window.document.body, 'mod-mui-overlay');
    }

  }


  render() …

语境

我有一个由mobx-state-tree（MST）支持的React应用程序。其中一个页面进行两个并行的 API调用，以获取的列表Projects和系统的列表Users。

然后，将这两个API的响应作为快照应用到同一树中的两个兄弟节点。项目模型的所有者字段是指用户模型。

我的问题是，GET项目API调用通常比GET Users API调用更早完成。经典的“比赛条件”。因此，当MST尝试取消引用所有者值时，具有此类标识符的用户在树中不可用，并且出现如下运行时错误：

错误：[mobx-状态树]无法解析引用'dtGNbVdNOQIAX0OMGaH2r2oSEf2cMSk9AJzPAf4n7kA'以键入“用户”（来自节点：/ projectListStore / projects / 0 / owner）

题

如何解决该错误？

请注意，进行API调用相互依赖（await或users.load().then(users => { projects.load(); }）不是我们项目的选择。

MST模型

export const ProjectModel = types
  .model('Project', {
    projectId: types.optional(types.identifierNumber, 0),
    title: '',
    descriptionStatus: '',
    projectStatus: '',
    startDate: CustomDate,
    endDate: CustomDate,
    owner: types.maybeNull(types.reference(User)), // -----
  })                                                        \ 
  // ...                                                     |
                                                             |
export const User = types                                    |
  .model('User', {                                          /
    userId: types.identifier,                      // <<<--
    userName: '',
    firstName: '', …