问题
react 在使用 mobx 作为状态管理，我在 context 上下文上调用 context 的方法，报错以下错误
[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: AuthStoreClass@1.authUser
先来看看 context 的定义
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);
};
在组件中调用 login 方法，使用如下
const LoginPage = observer(() => {
const authStore = useAuthStore()
...
authStore.login(...)
原因
由于 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;
});
// 或者单独使用方法来设置
// this.setUser(authUser);
};
setUser = (user) => {
this.authUser = authUser;
};
}
