Question

我遇到一个问题，我的MobX商店的可观察对象在路线导航/组件负载上不断重置。场景如下，用户选择一个帐户并将其存储在selectedAccount中可观察的位置。

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；

每次加载使用商店的组件时，observable似乎都被初始化为一个空对象。

我想念什么？

更新：

在这里，我包括提供者。 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()
}

Answer 1

来自Mobx docs：

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

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

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

Answer 2

结果是我没有使用Link进行重定向，而是使用了定位标记。

因此，用react-router Link替换锚标记解决了该问题。

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

React MobX可观察对象不断重置

2 个答案: