标签: mobx-react

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

我是mobx的新手.ObservableObjectAdministration当我调用计算的getServerUrls()函数而不是对象时,我想知道为什么我会得到.

以下是我的商店.

import { observable, computed } from 'mobx';
import { ServerNames } from 'master-server-urls';

class ServerNamesStores {

  @observable ServerNameUrls = {};
  @computed get getServerUrls() {
    console.log('@computed get getServerUrls()',  this.ServerNameUrls);
    return this.ServerNameUrls;
  }

  constructor() {
    const overrideServer = {
      "medicontentServer": "https://mediaserver.example.com"
    }
    const newServerNames = Object.assign({}, ServerNames, overrideServer);
    this.ServerNameUrls = newServerNames;
  }

}

const serverNamesStores = new ServerNamesStores();

export default serverNamesStores;
export { ServerNamesStores };

以下是我的App.js

import React, { Component } from 'react';
import { observer } from …

我的 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 Router 和 MobX。

http://frontendinsights.com/connect-mobx-react-router/

但是，我在MobX 方式中遇到了一个问题——提供者组件。

这是代码示例：

import { Provider } from 'mobx-react';
import usersStore from './stores/usersStore';
import itemsStore from './stores/itemsStore';

const stores = { usersStore, itemsStore };

ReactDOM.render(
  <Provider {...stores}>
    <Router history={history}>
      <Route path="/" component={App}>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('app')
);

我试图在 index.js

import React from 'react'
import { render } from 'react-dom'
import { Router, hashHistory, Route, IndexRedirect } from 'react-router'
import App from './webapp/App'
import Home from './components/pages/Home'
import Dogs from './components/pages/Dogs' …

我想将mobx和mobx-persist与react-navigation集成.
我读过这些文章:

[1] https://hackernoon.com/react-navigation-with-mobx-2064fcdaa25b
[2] https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx -e2dffc209fcb
[3] https://github.com/react-navigation/react-navigation/blob/8e8d3d562c9e80616f145f97ffb02dcf2048e67e/docs/guides/Mobx-Integration.md
[4] MobX + React Native:注入商店的方式
[5] MobX - 当我将数据注入React组件时可以使用`inject`时为什么要使用`observer`
[6] 在React组件中注入Store导致出错

但我仍然有这个错误:

undefined is not a function (evaluating 'decorator(target, property, desc)')

这是我的App.js渲染:

render() {
    const hydrate = create({
        storage: AsyncStorage
    });

    hydrate('playerStore', stores.PlayerStore);
    hydrate('settingStore', stores.SettingStore);
    // .then(
    //     // () => console.warn('some hydrated')
    // );

    return <Provider {...stores} >
        <AppWithNavigationState />
    </Provider>;
}

这是我的routeStore.js:

import {observable} from "mobx";
import {action} from "mobx-react/native";
import AppDrawer from …

我正在组装一个小型 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 时运行。但事实并非如此。控制台输出是这样的

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

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

我配置了 package.json 和 babelrc，但是在使用装饰器时出现了一些错误。

我使用“react16.8.1”和“mobx5.9.4”。

我的 babelrc 代码：

    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",

    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-transform-object-assign",
        [
           "@babel/plugin-decorators-legacy",
            {
          "legacy": true
            }
        ],


    ]
}```
and my package.json

{
  "name": "material-dashboard-pro-react",
  "version": "1.5.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "3.9.2",
    "@material-ui/icons": "3.0.2",
    "axios": "^0.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "chartist": "0.10.1",
    "history": "4.7.2",
    "mobx": "^5.9.4",
    "mobx-react": "^5.4.3",
    "moment": "2.24.0",
    "moment-jalaali": "^0.8.3",
    "node-sass": "4.11.0",
    "nouislider": "13.1.0",
    "perfect-scrollbar": "1.4.0",
    "rc-pagination": "^1.17.13",
    "react": "16.8.1",
    "react-big-calendar": "0.20.3",
    "react-bootstrap-sweetalert": "4.4.1",
    "react-chartist": "0.13.3",
    "react-datetime": "2.16.3",
    "react-dom": "16.8.1",
    "react-google-maps": "9.4.5", …

我已经有一段时间了，这是怎么回事。我在mobx Storage中有一个数组，希望在我的React本机组件的Flatlist中的可折叠视图中显示。这里的问题是，当我单击它时，它确实会更改状态，但不会执行操作。经过一番研究，我在NativeBase中找到了一个手风琴，并在成功的小型测试之后尝试实现它。不幸的是，它无法识别出不是对象的数组索引值。因此，第一个问题与有关mobx动作的关闭和打开可折叠动作有关，第二个问题是无法从数组读取索引值的手风琴。如果任何人都可以帮助找到一种方法使数组中的相关对象动态折叠并显示值，

下面是相关的代码大杂烩，如果您需要更多代码，请随时提问，谢谢您的宝贵时间！

mobx文件：

import {observable, action} from 'mobx';
import {LayoutAnimation} from 'react-native'

class StateStorage {



  @observable list= ['Category','','','']
  @observable selectedMaterial=''
  @observable  materials = [ 
       {

      Specs:[
        textCategory= 'Drain',
        textSpec1='Usabley',
        textSpec2='Healthy',
        textSpec3='Bio'],
        name: 'RYTT',
        price: '$',
        image: require("./Icons/Rain.jpg"),
        spec1:require("./Icons/friendly.png"),
        spec2:require("./Icons/Cutler.png"),
        spec3:require("./Icons/logout.png"),
        category:'',
        icon: '',
      uses:[
              uses1='cecec', 
              uses2='- Cans' ,
              uses3='- Jars',
              uses4='- Signages',

      pros:[
              pros1='Lightweight',
              pros2='Tough',
              pros3='xsxxs',
              pros4='cdccd',
              ],
         cons:[         
              cons1='Inflated',
              cons2='Can be sticky',
              cons3='ejhcejccjhc',
              cons4='dcd',
              cons5='dc'],
        expanded: true,
           specCount:0,
            userCount:0,
             prosCount:0,
              consCount:0,                                                            
                x:0

    },   
    {

      Specs:[
        textCategory= 'Drain',
        textSpec1='Usabley', …

在 MobX with React 文档中，在 Side effects 和 observables部分有一个响应useEffect钩子内部变化的接收。

import React from 'react'
import { autorun } from 'mobx'

function useDocumentTitle(store: TStore) {
  React.useEffect(
    () =>
      autorun(() => {
        document.title = `${store.title} - ${store.sectionName}`
      }),
    [], // note empty dependencies
  )
}

该示例React.useEffect与mobx.autorun（但可能是mobx.reaction）结合使用，但我autorun在代码中看不到 的好处。一旦我们进入内部，useEffect我们就可以在依赖项数组中跟踪我们的依赖项。代码更清晰，不需要dispose()并且useEffect有一个明确的依赖数组，里面有需要的东西。

import React from 'react'
import { autorun } from 'mobx'

function useDocumentTitle(store: TStore) {
  React.useEffect(() => document.title = `${store.title} …