标签: mobx-state-tree

我正在尝试使用可选的可为空的字符串值创建模型。我试过同时使用

  hint: types.optional(types.string, ""),

和

  hint: types.maybe(types.string),

当我尝试针对该对象设置json对象时，两者均会导致错误。如果我手动循环遍历json对象并将空内容设置为空字符串“”，则可以使用。

无法将路径“内容”值中的“ jsoncontent”转换null为类型时出错：（string值不是字符串）。

为什么要在香草MobX上使用MobX状态树？好像我每次阅读有关MobX的文章时，都在同一个地方提到了MST。有人真的只在使用MobX吗？

问题可能太笼统了...

通过下面的代码我得到这个错误：

error: Error: [mobx-state-tree] Cannot modify 
'AuthenticationStore@<root>', the object is protected and can only be 
modified by using an action.

有问题的代码（生成器）：

.model('AuthenticationStore', {
    user: types.frozen(),
    loading: types.optional(types.boolean, false),
    error: types.frozen()
  })
  .actions(self => ({
    submitLogin: flow(function * (email, password) {
      self.error = undefined
      self.loading = true
      self.user = yield fetch('/api/sign_in', {
        method: 'post',
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          'user' : {
            'email': email,
            'password': password
          }
        })
      }).then(res => {
        return res.json()
      }).then(response => {
        self.loading …

我有一篇文章是 mobx-state-tree 对象，我在 React 应用程序中使用它。

这是我的树内的一个动作

setId(id: string) {
  self.id = id

  this.updateProduct()
},

还有活动

 <input
  value={comp.productId}
  onChange={(e) => comp.setId(e.target.value)}
/>

问题是this.updateProduct()每次更改都会运行，并在每次按键后进行异步调用。

我想利用 mobx 反应并使用类似的东西

reaction(
() => ({
  id: this.id
}),
() => {
  this.updateProduct()
}, {
  delay: 500 // this is the key thing
})

我发现延迟在这种情况下非常有用，所以我想在树内使用它们。

在 mobx 状态树中添加反应是一个好习惯吗？如果是，使用反应的正确位置在哪里？

我可以在反应组件内定义反应，但它将在树之外。在树外面是个好习惯吗？

错误错误：[mobx-state-tree] 期望 mobx-state-tree 类型作为参数 1，但未定义错误不变违规：模块 AppRegistry 不是已注册的可调用模块（调用 runApplication）。导致该错误的常见原因是应用程序入口文件路径不正确。当 JS 包损坏或加载 React Native 时出现早期初始化错误时，也可能会发生这种情况。错误不变违规：模块 AppRegistry 不是已注册的可调用模块（调用 runApplication）。导致该错误的常见原因是应用程序入口文件路径不正确。当 JS 包损坏或加载 React Native 时出现早期初始化错误时，也可能会发生这种情况。

当我用它的商店创建新模型并且我试图在商店根目录中声明它时会发生这种情况，但我收到了此错误（我的模型代码没有任何错误）

我明白了:

错误:[mobx-state-tree]期望一个mobx-state-tree类型作为第一个参数,得到类HubConnection {constructor(urlOrConnection,options = {}){options = options || {};

尝试这样做时:

import { HubConnection } from '@aspnet/signalr-client';
.model('MyStore', {
  connection: types.optional(HubConnection, new HubConnection('http://localhost:5000/myhub')),
})

我可以在我的React组件的构造函数中声明它,而不是像以前那样

constructor(props){
  super(props);
  this.connection = new HubConnection('http://localhost:5000/myhub');
}

但是,所有附加的事件处理程序也需要在组件中定义

componentDidMount(){
  this.connection.on('Someaction', async(res: any) => {});
}

并开始/关闭连接

handleBtnClicked = () => {
  this.connection.start().then(() => self.connection.invoke('Someotheraction'));
}

理想情况下,我认为这属于模型和模型动作,因此反应组件仅触发对模型的操作,仅此而已.

有没有办法在mobx-state-tree模型中存储除mobx-state-tree类型之外的其他方法,你能以某种方式将它包装在mobx类型中,或者这实际上不是属于mobx的东西,因此故意.

使用 mobx-state-tree 我想将参数传递给异步操作。他们建议使用生成器函数。他们的例子没有提供使用参数的例子，我觉得如何做也不是很明显。

我尝试将流函数包装在普通函数中以向下传递参数。但是它不起作用。我试过下面的例子，包括一些额外的摆弄。

setAvailability: function (id, status) {
        console.log("inside outer")
        flow(function* () {
            console.log("inside inner")
            try {
                yield UpdateAvailability(id, status)
                const { data } = yield self.fetch(GetTutors)
                self.data = data;
            } catch (e) {
                console.log(e.stack)
            }
        })
    },

setAvailability: flow*(function(id, status) {
            console.log("inside inner")
            try {
                yield UpdateAvailability(id, status)
                const { data } = yield self.fetch(GetTutors)
                self.data = data;
            } catch (e) {
                console.log(e.stack)
            }
        })
    },

在流函数内部传递参数时，它不会编译，当我包装函数时，它只会打印 console.log("inside inner")

如何将参数传递给异步操作函数？

我正在尝试将多个函数包装在一个函数中。

我有一个这样的模型：

const CookModel = types.actions(self =>({
  talkToSousChefs:() => {
    // talk to sous-chefs
  },
  talkToWaiters: () => {
    // business logic
  },
  talkToVendors: () => {
    // business logic
  },
  runTalkRoutine: () => {
    // current code

    const root = getRoot<typeof CookModel>(self)

    root.talkToSousChefs()
    root.talkToVendors()
    root.talkToWaiters()

    // what's the best practice?
  }
}))

将这些操作包含在内的最佳方式是什么runTalkRoutine？