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

IT技术 reactjs mobx mobx-react-lite
2021-05-13 10:13:47

我的上下文如下所示：

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] 由于启用了严格模式，因此不允许在不使用操作的情况下更改（观察到的）可观察值。尝试修改：AuthStoreClass@1.authUser

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

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。

其它你可能感兴趣的问题
上一篇React：如何组合 Material-UI 中标记的多个样式 下一篇在 Redux 连接中使用 React forwardRef