标签: mobx-react

这是我第一次使用 MobX，所以这可能是一个比我想象的更简单的问题，但我尝试过的东西没有任何错误；无论我在哪里尝试使用商店，商店都是未定义的。我试过将商店直接导入组件并从主文件传递道具（也使用 ，但我不确定我是否正确使用）。我也尝试了几种不同的 .babelrc 文件设置，但这似乎不是问题。

这是用户存储：

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', …

我正在从我的 React Native 应用程序中删除装饰器（babel 的问题太多）并且我的操作不起作用（包含的函数没有运行）。

我正在翻译集体诉讼，例如

class MyStore {
  //...

  @action 
  myAction(param) {
    //...
  }
}

到

class MyStore {
  //...

  myAction(param) {
    action("Perform action with param", (param) => {
      //...
    })
  }
}

将类@action 转换为非装饰器形式的正确方法是什么？

我有一个提取我componentDidMount不会刷新appState数据,@observer @inject('appState')但我会一直工作@inject('appState') @observer.

与此同时,我在控制台收到一条警告,说我的订单错了.

Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'

哪个订单正确,为什么？

我是Mobx和reactjs的新手，我了解Redux和本机响应，并且在Redux中，当我习惯于调用动作并且道具得到更新时，componentDidUpdate生命周期方法会被触发。

我现在遇到的情况是登录。因此，用户填写表单，单击提交，然后提交调用Mobx操作（异步），并且服务器响应时，观察对象将更新，然后导航到主页（在组件中进行导航）。

这是我的商店代码。

import { autorun, observable, action, runInAction, computed, useStrict } from 'mobx';

useStrict(true);

class LoginStore {
    @observable authenticated = false;
    @observable token = '';

    @computed get isAuthenticated() { return this.authenticated; }


    @action login = async (credentials) => {
        const res = await window.swaggerClient.Auth.login(credentials)l
        // checking response for erros
        runInAction(() => {
            this.token = res.obj.token;
            this.authenticated = true;
        });
    }
}

const store = new LoginStore();

export default store;

export { LoginStore };

这个处理程序在我的组件中

handleSubmit = (e) …

我无法了解为什么该TableContainer|TableComponent组件没有正确更新其子级的真相。在商店中，我有一个对象数组，当我尝试更新对象属性时，它Table不会更新其值。如果我替换整个数组，它仍然可以工作。

您可以在此沙箱中检查此行为。

文档指出，启动可观察数组，也使项目可观察。（文档）

与对象类似，可以使用 observable.array(values?) 或将数组传递给 observable 来使数组变得可观察。这也以递归方式工作，因此数组的所有（未来）值也将是可观察的。

为什么会发生这种情况？我来自 redux 背景，我正在尝试将我的注意力集中在 mobx 上，但没有取得太大成功。

我在 React Native 中有一个基本的 MobX 设置，但是在 observable 更新后我的组件没有重新渲染，我似乎无法弄清楚原因。

反应原生0.56.1 ; 反应16.4.1 ; mobx 4.5.0 ; mobx 反应5.2.8

店铺

class AppStore {
  drawer = false;
  toggleDrawer = () => {
    this.drawer = !this.drawer;
  }
}
decorate(AppStore, {
  drawer: observable,
  toggleDrawer: action
});

const app = new AppStore();
export default app;

成分

class _AppLayout extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      drawerAnimation: new Animated.Value(0)
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    console.log('will not get called');
    if (this.props.app.drawer !== nextProps.app.drawer) { …

我正在将react-native 0.51.1 迁移到0.59.8。我正面临 Mobx 的问题。

如果 @observable 装饰成员已分配像这样的 init 值

@observable cnt = 0;

然后就可以了。

但如果它是未定义的，

@observable cnt;

那么它就不起作用了。

我有许多未定义的可观察商店，它们在 0.51.0 中工作。
我想让它以未定义的方式工作。

Babel 装饰选项在迁移过程中已更改。

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-transform-flow-strip-types'],
    ['@babel/plugin-proposal-decorators', { 'legacy': true}],
    ['@babel/plugin-proposal-class-properties', { 'loose': true}],
  ],
}

//This doesn't work but worked in react-native 0.51.0
import { observable } from 'mobx';

export class Count {
  @observable cnt;

  constructor(initValue = 0) {
    this.cnt = initValue;
  }

  add(){
    this.cnt++;
  }
}

//This works
import …

我正在使用最近的 create-react-app 设置和 JS 和mobx decorate方法。

import { observable, action, decorate } from 'mobx'

class UserStore {
  users = []
  currentUser = {}

  setUsers(value) {
    this.users = value
  }
}

decorate(UserStore, {
  users: observable,
  currentUser: observable,
  setUsers: action
})

export default UserStore

我可以使用商店并读取空的users和currentUser可观察的，但是当我尝试使用该setUsers操作时，我收到以下错误：

TypeError: Cannot set property 'users' of undefined

它看起来像this未定义，但这是大多数 MobX 教程显示的常见方式，不应抛出错误......

当我尝试运行我的反应代码时，我收到了低于警告的信息，我已经运行了“npm run eject”并更新了 package.js 以使装饰器在反应中工作，它工作正常，但我在控制台中得到低于警告

[MobX] 您尚未配置观察者批处理，这在某些情况下可能会导致意外行为。在https://github.com/mobxjs/mobx-react-lite/#observer-batching查看更多

import {  observable, computed, action, when  } from 'mobx';

class TodoStore {
    @observable todos = [];
    @observable filter = "";
}

以上是我的代码，我是 mobx 的新手并做出反应

我最近开始学习如何使用 Mobx 来管理我的应用程序的状态，最近我遇到了以下错误：

Object literal may only specify known properties, and "data" does not exist in type "AnnotatiosMap<this, never>".

每当我想将我的班级的财产设为私有时，就会发生这种情况。但是，如果它是公共的或受保护的，则不会出现该问题。

这是我的代码的一小段：

Object literal may only specify known properties, and "data" does not exist in type "AnnotatiosMap<this, never>".

我应该怎么做才能将我的财产设为私有但仍受到监视？

祝你有美好的一天！