React MobX observables 不断重置

Question

我遇到了一个问题，我的 MobX 存储可观察对象在路由 navigation/component 加载时不断重置。场景如下，用户 select 有一个帐户并将其存储在 selectedAccount observable 中。

selectedAccount 将被解析为一个保护组件，该组件检查帐户是否已被 selected 或不。如果不是，用户必须 select 一个帐户，并将被重定向到一个使用保护组件的欢迎页面。但是在导航时 selectedAccount 被重置为空对象，因此保护组件重定向回 select 帐户页面。

我想知道它是否与持有 selectedAccount:

的商店的初始化有关

export interface IUserStore {
users: any;
singleUser: any;
selectedAccount: any;
getUsers(): Promise<void>;
createUser(obj: any): any;
selectAccount(obj: any): any;
getSingleUser(id: string): Promise<void>;
updateUser(obj: any): any;

}

export class UserStore implements IUserStore {
@observable users: any = [];
@observable singleUser: any = {};
@observable selectedAccount: any = {};
@observable state = "pending"; // "pending" / "done" / "error"

保护组件：

interface AppProps extends RouteProps {
userStore: IUserStore

}

@inject('userStore')
@observer
export class AccountRequired extends Route<any> {
public render() {

    if (Object.keys(this.props.userStore.selectedAccount).length == 0) {
        const renderComponent = () => (<Redirect to={{pathname: "/selectAccount"}}/>);
        return <Route {...this.props} component={renderComponent} render={undefined}/>;
    } else {
        return <Route {...this.props}/>;
    }
  }
}

需要导出默认帐户；

每次我加载使用存储的组件时，似乎 observables 都被初始化为一个空对象。

我错过了什么？

更新：

这里是我包含提供商的地方。 index.tsx:

// Stores
import { stores  } from './Stores';

ReactDOM.render(<Provider {...stores }><App /></Provider>, document.getElementById('root'));

所有商店都在这里出口。 Stores/index:

import { AccountStore } from "./AccountStore";
import { UserStore } from "./UserStore";
import { RolesStore } from "./RoleStore";

interface Stores {
  [key: string]: any;
 }

export const stores:Stores = {
   accountStore: new AccountStore(),
   userStore: new UserStore(),
   rolesStore: new RolesStore()
}

Answer 1

来自Mobx docs：

MobX observable objects do not detect or react to property assignments that weren't declared observable before. So MobX observable objects act as records with predefined keys.

您可以尝试以下方法之一：

升级到 Mobx v5
使用observable.map代替observable
update/add selectedAccount 来自 selectedAccount.set(key, value)

Answer 2

原来我没有使用 Link 重定向，我使用的是锚标签。

所以用 react-router Link 替换锚标签解决了这个问题。

对于遇到同类问题的其他人运行，mobx-persist 是一个可以在页面刷新时保持 obeservables 值的库。

React MobX observables 不断重置

React MobX observables keep resetting

reactjs

react-router

mobx