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

Question

我的上下文如下所示:

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()
    ...
    authStore.login(...)

最后一行报告以下警告:

[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: AuthStoreClass@1.authUser

一切都按预期工作。我该如何解决这个问题？

Answer 1

由于您的 login函数是异步的，那么你需要使用 runInAction在内部，或在单独的操作中处理结果，或使用其他一些处理异步操作的方式:

import { runInAction, makeAutoObservable } from "mobx"

class AuthStoreClass {
    authUser = null

    constructor() {
        makeAutoObservable(this)
    }

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

    // This method will be wrapped into `action` automatically by `makeAutoObservable`
    setUser = (user) => {
        this.authUser = authUser
    }
}

有关异步操作的更多信息(您甚至可以使用生成器!): https://mobx.js.org/actions.html#asynchronous-actions
在 MobX6 中，默认情况下会强制执行操作，但您可以使用 configure 禁用警告。方法:

import { configure } from "mobx"

configure({
    enforceActions: "never",
})

但要小心，这是 enforceActions的目标。是您不要忘记在 action 中包装事件处理程序和所有更改.不这样做可能会导致观察者的额外重新运行。例如，如果您在没有操作的情况下更改某个处理程序中的两个值，那么您的组件可能会重新渲染两次而不是一次。 makeAutoObservable自动包装所有方法，但您仍然需要处理 async方法和 Promises手动。