MobX：由于启用了严格模式，因此不允许在不使用操作的情况下更改观察到的可观察值

问题描述

我的上下文如下：

class AuthStoreClass {
    authUser = null

    constructor() {
        makeAutoObservable(this)
    }

    login = async (params) => {
        const { data: { data: authUser } } = await loginUser(params)
        this.authUser = authUser
    }
}

const AuthStoreContext = React.createContext(null);

export const authStoreObject = new AuthStoreClass()

export const AuthStoreProvider = ({ children }: any) => {
    return <AuthStoreContext.Provider value={authStoreObject}>{children}</AuthStoreContext.Provider>;
};
export const useAuthStore = () => {
    return React.useContext(AuthStoreContext);
};

我正在组件的其他地方使用上下文：

const LoginPage = observer(() => {
    const authStore = useAuthStore()
    ...
    authUser.login(...)

最后一行报告以下警告：

[MobX]由于启用了严格模式，因此不允许在不使用操作的情况下更改（观察到的）可观察值。试图修改：[e-mail]

一切正常。我该如何解决这个问题？

解决方法

由于您的login函数是异步的，因此您需要在内部使用runInAction，或在单独的操作中处理结果，或使用其他方式来处理异步操作：

import { runInAction} from "mobx"

// ...

    login = async (params) => {
        const { data: { data: authUser } } = await loginUser(params)
        
        runInAction(() => {
          this.authUser = authUser
        })
        // or do it in separate function
        this.setUser(authUser)
    }

有关异步操作的更多信息：https://mobx.js.org/actions.html#asynchronous-actions

在MobX6中，默认情况下会强制执行操作，但是您可以使用configure方法禁用警告：

import { configure } from "mobx"

configure({
    enforceActions: "never",})