如何在嵌套Mobx存储中使用React上下文？

Question

我有两家商店：formStore和profileStore

FormStore

export class ProfileFormStore {
    @observable editing = false;
    profileStore = new ProfileStore(this.roleId);
    originalValue?: ApiModel | null;

    @action.bound
    startEdit() {
        // this.originalValue = this.profileStore.toJson();  
/*  if uncomment above, next error thrown
    RangeError: Maximum call stack size exceeded
    at initializeInstance (mobx.module.js:391)
    at ProfileStore.get (mobx.module.js:381)
    at ProfileStore.get
*/
        this.editing = true;
    }
}

ProfileStore

export class ProfileStore {
    @observable userProfile: ApiModel = {
        userProfile: {
            newsAndUpdates: false,
            email: "",
            phone: "",
            lastName: "",
            firstName: "",
        },
    };

    @observable email = "";

    @action.bound
    fetch() {
        // this.fromJson(this.actions.fetch());
        console.log("start");
        this.email = "qwe";
        console.log("end");
    }

    @computed
    toJson(): ApiModel {
        return {
            userProfile: {
                firstName: this.userProfile.userProfile.firstName,
                lastName: this.userProfile.userProfile.lastName,
                phone: this.userProfile.userProfile.phone,
                email: this.userProfile.userProfile.email,
                newsAndUpdates: this.userProfile.userProfile.newsAndUpdates,
            },
        };
    }
}

而且我想使用上下文

const formStore = new ProfileFormStore();
export const profileFormContext = React.createContext({
    formStore,
    profileStore: formStore.profileStore,
});

export const useProfileContext = () => React.useContext(profileFormContext);

并且有两个组成部分：form和formControl

const controls = {
    admin: (<><ProfileName /><Email /></>),
    user: (<><ProfileName /></>)
};
export const Form = () => {
    const { formStore, profileStore } = useProfileContext();
    // this.fromJson(this.actions.fetch()); // if uncomment throws 'Missing option for computed get'

    return <form>(controls.admin)</form>
}

export const ProfileName = () => {
    const { formStore, profileStore } = useProfileContext();
    formStore.startEdit(); // check form store, when assigning from profileStore get overflow error

    return formStore.editing ? <input value='test' /> : <label>Test</label>
}

所以有两种错误：

1. 从observables的一部分ProfileStore访问FormStore时>
2. 更新observables的一部分的ProfileStore中的FormStore时>

FormStore运作良好

两个通过React.useContext注入的商店都遵循了这些示例https://mobx-react.js.org/recipes-context，但是它们的商店没有嵌套。我将它们嵌套，因为我想从profileStore

访问formStore

这些错误是什么意思？如何解决它们？

我有两个商店：formStore和profileStore FormStore导出类ProfileFormStore {@observable edit = false; profileStore =新的ProfileStore（this.roleId）; originalValue ?: ...

Answer 1

实际上不是答案:)但是我使用的解决方案

export class ProfileStore {
   @observable editing;
   @observablt userProfile: UserProfile;
   ...
}