Не удалось выполнить инвариант: изменение наблюдаемых наблюдаемых значений вне действий не допускается

Question

Как я могу написать это с помощью mobx и axios? Я пытаюсь использовать функцию стрелки, чтобы сохранить область действия "this", но я могу ошибаться.

@action saveMode() {

    axios.post('/Course/Post', { Name: "test41515"})
        .then(response => {
            console.log(response, this.isEditing);
            this.isEditing = !this.isEditing;
            this.failedValidation = [];
        })

}

Uncaught (in promise) 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: [e-mail]
    at invariant (app.bundle.js:7316)
    at fail (app.bundle.js:7311)
    at checkIfStateModificationsAreAllowed (app.bundle.js:7880)
    at ObservableValue.prepareNewValue (app.bundle.js:5786)
    at setPropertyValue (app.bundle.js:6663)
    at Course.set [as isEditing] (app.bundle.js:6631)
    at app.bundle.js:62336
    at <anonymous>

Answer 1

В документации MobX есть целая страница о написании асинхронных действий. Это было бы с чего начать, https://mobx.js.org/best/actions.html, и фактически первый пример - это именно та проблема, с которой вы сталкиваетесь в заметке.

В приведенном выше примере будут генерироваться исключения, поскольку обратные вызовы, передаваемые обещанию fethGithubProjectsSomehow, не являются частью действия fetchProjects, так как действия применяются только к текущему стеку.

Учитывая ваш фрагмент, самое простое решение заключается в использовании runInAction

@action saveMode() {

  axios.post('/Course/Post', { Name: "test41515"})
    .then(response => {
      runInAction(() => {
        console.log(response, this.isEditing);
        this.isEditing = !this.isEditing;
        this.failedValidation = [];
      });
    })

}