Reactjs 反应MobX观测值保持重置

我面临的问题是，我的MobX存储观测值在路线导航/组件加载时不断重置。场景如下，用户选择一个帐户并将其存储在

selectedAccount

observable中

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;

保护组件：

interface AppProps extends RouteProps {
userStore: IUserStore

}

发件人：

MobX可观察对象不会检测到以前未声明为可观察的属性分配，也不会对这些属性分配做出反应。因此，MobX可观测对象充当具有预定义键的记录

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

• 升级到Mobx

  v5

• 使用而不是

  可观察的

• 更新/添加

  selectedAccount

  by

来自：

MobX可观察对象不会检测到以前未声明为可观察的属性分配，也不会对这些属性分配做出反应。因此，MobX可观测对象充当具有预定义键的记录

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

• 升级到Mobx

  v5

• 使用而不是

  可观察的

• 更新/添加

  selectedAccount

  by

---

原来我没有使用

链接来重定向，我使用的是锚定标签

因此，用
react router
Link
替换锚定标签解决了这个问题

对于其他遇到同样问题的人，
mobx persist
是一个库，可以在页面刷新时保留obeservables值。
结果表明，我没有使用
Link
重定向，而是使用了锚定标记

因此，用
react router
Link
替换锚定标签解决了这个问题

对于遇到相同问题的任何其他人，
mobx persist
是一个可以在页面刷新时保持obeservables值的库。
您能否在问题中包括呈现
提供者的组件和初始化
用户存储的代码？是，我已经更新了op。userStore被注入了多个位置。您能否在问题中包括呈现
提供者的组件和初始化
userStore
的代码？是的，我已经更新了op。userStore被注入了多个位置。
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}/>;
    }
  }
}

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