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

Последняя строка сообщает следующее предупреждение:

[MobX] Поскольку включен строгий режим, изменение (наблюдаемых) наблюдаемых значений без использования действия запрещено. Пытался изменить: [email protected]

Все работает как положено. Как я могу исправить эту проблему?


reactjs mobx mobx-react-lite
person mleister    schedule 10.11.2020    source источник

Ответы (1)


arrow_upward
22
arrow_downward

Поскольку ваша функция 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",
})
person Danila    schedule 10.11.2020
comment
Отличное объяснение! Спасибо! - person mleister; 10.11.2020