javascript – 使用具有异步功能的MobX @action装饰器和

我正在使用MobX 2.2.2来尝试在异步动作中改变状态.我的MobX的useStrict设置为true.

@action someAsyncFunction(args) {
  fetch(`http://localhost:8080/some_url`,{
    method: 'POST',body: {
      args
    }
  })
  .then(res => res.json())
  .then(json => this.someStateProperty = json)
  .catch(error => {
    throw new Error(error)
  });
}

我得到：

Error: Error: [mobx] Invariant failed: It is not allowed to create or change state outside an `action` when MobX is in strict mode. Wrap the current method in `action` if this state change is intended

我需要将@action装饰器提供给第二个.then语句吗？任何帮助将不胜感激.

解决方法

Do I need to supply the @action decorator to the second .then statement? Any help would be appreciated.

这是非常接近实际的解决方案.

.then(json => this.someStateProperty = json)

应该

.then(action(json => this.someStateProperty = json))

记住,行动可以以许多方式被称为@action不排除.从the docs on action：

动作(fn)
> action(name,fn)
> @action classMethod
> @action(name)classMethod
> @action boundClassMethod =(args)=> { 身体 }
> @action(name)boundClassMethod =(args)=> { 身体 }

是将功能标记为动作的所有有效方式.

这是一个解决方案：http://jsbin.com/peyayiwowu/1/edit?js,output

mobx.useStrict(true);
const x = mobx.observable(1);

// Do async stuff
function asyncStuff() {
  fetch('http://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    // .then((objects) => x.set(objects[0])) BREAKS
    .then(mobx.action((objects) => x.set(objects[0])))
}

asyncStuff()

至于为什么你的错误实际上发生了,我猜测,顶级的@action不递归地装饰任何函数作为它的装饰的函数内的动作,这意味着你的匿名函数传递到你的承诺不是一个真正的行动.