标签: mobx-react

是否可以检测到可观察到的物体以任何方式发生变化？

例如，假设您有以下内容：

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]

然后，通过一些用户输入，值会更改。我如何轻松检测到这一点？

我想添加一个全局的“保存”按钮，但只有在自初始加载以来该可观察项已更改的情况下，才能使其单击。

我当前的解决方案是添加另一个myObjectChanged返回true / false的observable ，并且无论组件在myObject中更改数据的位置如何，我还添加一行将myObjectChanged更改为true的行。而且，如果单击保存按钮，它将保存并更改为可观察到的false。

这导致大量额外的代码行散布在各处。有更好/更清洁的方法吗？

这是我组件的简化版本：

import React from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import { fromPromise } from 'mobx-utils';

@observer
export class MyComponent extends React.Component {
  @action componentDidMount() {
    const { store, params } = this.props;
    this.warehouse = store.findById(params.id);
  }

  @observable warehouse = fromPromise(Promise.resolve());

  render() {
    return this.warehouse.case({
      fulfilled: (value) => (
        <div>
          fulfilled
        </div>
      ),
      rejected: (error) => (
        <div>
          rejected
        </div>
      ),
      pending: () => (
        <div>
          pending
        </div>
      )
    });
  }
} …

我定义了一个 mobx 地图如下：

@observable editors = observable.map();

然后我在editors下面添加了对象：

  editors.set(key, {
    alias: 'alias-1',
    message: 'hello',
  })

当我从editor下面获取对象时：

  let myEditor = editors.get(key)

返回的对象myEditor具有一些内置函数，例如：

$mobx:ObservableObjectAdministration
get alias:function ()
set alias:function ()
get message:function ()
set message:function ()

我想知道如何从editor?

我正在尝试反应原生导航,但我遇到了一个简单的问题.

该应用程序有一个没有选项卡的登录页面.(非常类似于facebook登录页面)(图片参考 - 图片只是为了给出一个想法.图片礼貌 - 谷歌 用户登录后,我想转换为基于标签的应用程序,我想要两个不同的导航堆栈标签(在Quora等应用中发生)(图片参考 - 再次图像只是一个参考)

我使用mobx进行状态管理.

我知道这是一个常见的用例,但我对我所知的两个选项感到困惑 -

1. 提供对用户登录变量的反应,并从单屏应用程序更改为基于选项卡的应用程序.(唯一关注的是当isLoggedIn发生反应时缺少动画)例如 - App.js

   constructor() {
   reaction(() => auth.isLoggedIn, () => app.navigateToHome())
   reaction(() => app.root, () => this.startApp(app.root));
   app.appInitialized();
   

   Run Code Online (Sandbox Code Playgroud)

   }

   startApp(root){
       switch (root) {
         case 'user.login':
           Navigation.startTabBasedApp({
             tabs: [
               {
                 label: 'One',
                 screen: 'user.login',
                 icon: require('./assets/one.png'),
                 selectedIcon: require('./assets/one_selected.png'),
                 navigatorStyle: {},
               }
             ]
             screen: {
               screen: root,
               title: 'Login',
               navigatorStyle: {
                 screenBackgroundColor: colors.BACKGROUND,
                 statusBarColor: colors.BACKGROUND
               },
               navigatorButtons: {}
             }
           })
           return ;
         case 'user.home':
           Navigation.startTabBasedApp({
             tabs: [ …

   Run Code Online (Sandbox Code Playgroud)

我有React/Mobx应用程序.当我在商店中进行更改时,组件正在更新(重新呈现),但我需要进行一些比较以添加更多功能,因此我想使用componentWillReceiveProps(nextProps)并将nextProps与this.props进行比较.不知怎的,它没有被召唤.为了得到那个,任何想法,我做错了什么,或者我还能做些什么？

我正在使用mobx反应类型脚本

为什么<MainNote/>显示错误

我是否需要设置默认道具？

Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)
MainNote.tsx(9, 3): 'profileStore' is declared here.
(alias) class MainNote
import MainNote

我不想传递道具，因为它是mobx弹出的道具。

谢谢您的帮助

代码如下

Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)
MainNote.tsx(9, 3): 'profileStore' is declared here.
(alias) class MainNote
import MainNote

import React, { Component } from 'react';
import MainNote from './MainNote';
import { observable, computed } from 'mobx'
import { observer, inject, IStoresToProps } from 'mobx-react' …

我正在尝试将mobx与本机反应并陷入问题。

@inject('someStore')
@observer
export class SomeComponent extends Component {
   render() {
       ...
   }
}

我确定我已经为decorator配置了正确的babel插件，但是@injectdecorator给了我一个例外"Expected a constructor."。

我不知道为什么会这样，因为我在另一个项目中以这种方式使用了mobx。有没有人经历过这个问题？

我的 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 合并到依赖项中。下面是 babel 的 package.json 设置。

"babel": {
"presets": [
  "@babel/preset-env",
  "react-app"
],
"plugins": [
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ],
  [
    "@babel/plugin-proposal-class-properties",
    {
      "loose": true
    }
   ]
 ]
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.5"
}

启动服务器时出现的实际错误如下：

./src/index.js
Module build failed: ReferenceError: Unknown plugin "@babel/plugin-proposal- 
decorators" specified in 
"/Users/briankaty1/Desktop/mobx/aquastars/react_aquastars/package.json" at 0, 
attempted to resolve relative to 
"/Users/briankaty1/Desktop/mobx/aquastars/react_aquastars"

任何帮助将不胜感激。

我的组件有两个Rect.useEffect钩子

const Example = ({ user }) => {
  React.useEffect(() => {
    autorun(() => {
      console.log("inside autorun", user.count);
    });
  });

  // Only runs once
  React.useEffect(() => {
    console.log("Why not me?");
  });

  return <Observer>{() => <h1>{user.count}</h1>}</Observer>;
};

我使用mobx. 它被正确地重新渲染。但是"Why not me?"只打印一次。

根据官方文档

默认情况下，效果在每次完成渲染后运行

这意味着console.log("Why not me?");也应该在每次user更新prop 时运行。但事实并非如此。控制台输出是这样的

这种明显的不一致背后的原因是什么？

我的完整代码可以在这里查看