React MobX observables 不断重置答案

【问题标题】：React MobX observables keep resettingReact MobX observables 不断重置
【发布时间】：2019-08-30 13:59:51
【问题描述】：

我遇到了一个问题，即我的 MobX 商店 observables 在路由导航/组件加载时不断重置。场景如下，用户选择一个账户并将其存储在selectedAccount observable 中。

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

我想知道它是否与持有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}/>;
    }
  }
}

导出默认AccountRequired；

似乎每次我加载使用商店的组件时，可观察对象都被初始化为空对象。

我错过了什么？

更新：

这里是我包括提供者的地方。 index.tsx：

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

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

所有商店都在这里出口。商店/索引：

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()
}

【问题讨论】：

能否在问题中包含呈现Provider 的组件和初始化userStore 的代码？
是的，我已经更新了操作。 userStore 在多个地方注入。

标签： reactjs react-router mobx

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

来自Mobx docs：

MobX 可观察对象不会检测或响应之前未声明为可观察的属性分配。因此 MobX 可观察对象充当具有预定义键的记录。

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

升级到 Mobx v5
使用observable.map 而不是observable
通过selectedAccount.set(key, value)更新/添加selectedAccount

【讨论】：