Mobx在行动之外改变可观察的价值观

4 javascript ecmascript-6 reactjs mobx

我收到以下错误:

proxyConsole.js:54 Error: [mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: ObservableObject@1.items
    at invariant (mobx.module.js:2326)
    at fail (mobx.module.js:2321)
    at checkIfStateModificationsAreAllowed (mobx.module.js:2890)
    at ObservableValue../node_modules/mobx/lib/mobx.module.js.ObservableValue.prepareNewValue (mobx.module.js:796)
    at setPropertyValue (mobx.module.js:1673)
    at Object.set [as items] (mobx.module.js:1641)
    at Store.js:41
    at <anonymous>
Run Code Online (Sandbox Code Playgroud)

但是我正在将函数包装起来,action所以我有点困惑:

import { observable, useStrict, action } from 'mobx';
import Services from './Services';

// ...

getAllTodos: action(() => {

    Services.getAllTodos()
    .then((response) => {

        state.items = response.data;

    }).catch((error) => {
        console.error(error);
    });

}),
Run Code Online (Sandbox Code Playgroud)

Services.js

// ...

getAllTodos () {
    return axios.get(root + '/items/');
}
Run Code Online (Sandbox Code Playgroud)

我在这里错过了什么?

Tho*_*lle 7

需要包含一个改变observable的函数action,所以也要在回调上使用它:

getAllTodos: action(() => {

  Services.getAllTodos()
  .then(action((response) => {
    state.items.replace(response.data);
  })).catch((error) => {
    console.error(error);
  });
})
Run Code Online (Sandbox Code Playgroud)

  • @oriharel 请注意 Tiwaz89 的 `getAllTodos` 方法如何是一个动作,但在我的回答中赋予 `then` 的函数也是一个动作。 (2认同)