When strict mode is enabled in mobx, an error is reported in the modified value in action, which is blocked. - Codes Helper

A simple store, login, logout, and access to users in the current session

class UserStore {

    @observable
    detail = {};

    @observable
    userInfoId;

    @observable
    nickName;

    @action
    doLogin = (data) => {
        const _this = this;
        return axios.post("/login", data).then(resp => {
            if(resp.success && resp.data) {
                message.success(`${resp.data.nickName}`);
                _this.detail = resp.data;
                _this.userInfoId = resp.data.userInfoId;
                _this.nickName = resp.data.nickName;
            }
            return resp;
        });
    }

    @action
    doLogout = () => {
        const _this = this;
        return axios.post("/logout").then(resp => {
            if(resp.success) {
                message.success("");
                _this.detail = {};
                _this.userInfoId = "";
                _this.nickName = "";
            }
            return resp;
        });
    }

    @action
    doFetch = () => {
        const _this = this;
        return axios.get("/user-info/current").then(resp => {
            if(resp.success && resp.data) {
                _this.detail = resp.data;
                _this.userInfoId = resp.data.userInfoId;
                _this.nickName = resp.data.nickName;
            }
            return resp;
        });
    }
}

after configuring configure ({enforceActions: "observed"}) ,
login and logout will report an error, which is prevented from updating

mobx.module.js?daf9:98 Uncaught (in promise) Error: [mobx] 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: UserStore@3.userInfoId
    at invariant$$1 (mobx.module.js?daf9:98)
    at fail$$1 (mobx.module.js?daf9:93)
    at checkIfStateModificationsAreAllowed$$1 (mobx.module.js?daf9:1075)
    at ObservableValue$$1.prepareNewValue (mobx.module.js?daf9:686)
    at ObservableObjectAdministration$$1.write (mobx.module.js?daf9:3509)
    at UserStore.set [as userInfoId] (mobx.module.js?daf9:3732)
    at eval (UserStore.jsx?3e72:105)

then try to take each field out:

    @action
    updateUserInfoId(userInfoId) {
        this.userInfoId = userInfoId;
    }

    @action
    updateDetail(detail) {
        this.detail = detail;
    }

    @action
    updateNickName(nickName) {
        this.nickName = nickName;
    }

    @action
    doLogin = (data) => {
        const _this = this;
        return axios.post("/login", data).then(resp => {
            if(resp.success && resp.data) {
                message.success(`${resp.data.nickName}`);
                //_this.detail = resp.data;
                //_this.userInfoId = resp.data.userInfoId;
                //_this.nickName = resp.data.nickName;
                _this.updateUserInfoId(resp.data.userInfoId);
                _this.updateDetail(resp.data);
                _this.updateNickName(resp.data.nickName);
            }
            return resp;
        });
    }

you can update successfully this time.

I don"t quite understand what"s wrong with updating directly in doLogin. The strange thing about
is that the doFetch method can be updated successfully.