Reactjs mobx状态树&x2B；密钥斗篷丢失密钥斗篷实例

我正在开发一个react应用程序，我正在使用mobx状态树和密钥斗篷。当我将KeyClope实例置于状态时，它只工作一次。例如，如果我尝试console.log我的实例，那么在我的keydape实例的init之后它会工作，但是如果我尝试调用loadUserProfile，那么会给我一个错误

TypeError: kc.authServerUrl is undefined

但是，如果在此之后调用KeyClope实例的console.log，则authServerUrl具有正确的值。我怎么能修好它

我的代码：

auth.store.ts

import { types } from 'mobx-state-tree'
import { KeycloakInstance } from 'keycloak-js'
import Keycloak from 'keycloak-js'

const KeycloakPrimitive = types.custom<string, KeycloakInstance>({
    name: "Keycloak",
    fromSnapshot(value: string) {
        // @ts-ignore
        return new Keycloak({
            // keycloack json
        })
    },
    toSnapshot(value: KeycloakInstance) {
        return JSON.stringify({
            // keycloack json
        })
    },
    isTargetType(value: string | KeycloakInstance): boolean {
        return value instanceof Keycloak
    },
    getValidationMessage(value: string): string {
        return ''
        // if (/^-?\d+\.\d+$/.test(value)) return "" // OK
        // return `'${value}' doesn't look like a valid decimal number`
    }
})

const AuthStore = types.model('AuthStore', {
    keycloakInstance: KeycloakPrimitive
}).actions(self => ({
    test(value: any) {
        console.log(value)
    },
    init() {
        self.keycloakInstance.init({
            onLoad: 'login-required'
        }).success(
            // @ts-ignore
            self.test
        )
    },
    getProfileData() {
        self.keycloakInstance.loadUserProfile().success((value: any) => {
            self.keycloakInstance = self.keycloakInstance
            console.log(value)
        })
    }
}))

export { AuthStore }

home.ts（我使用商店的地方）

---

你明白了吗？你明白了吗？

import { Store } from './Store'
import Keycloak from 'keycloak-js'

// @ts-ignore
const kc = new Keycloak({
    // keycloack json
})

const store = Store.create({
    drawerStore: {
        isOpen: false
    },
    appBarStore: {
        isUserMenuOpen: false
    },
    authStore: {
        keycloakInstance: kc
    }
})

export default store

import React from 'react'
import './Home.css'
import Page from '../../components/Page'
import { inject, observer } from 'mobx-react'
import { InjectProps } from '../../utils/interfaces/InjectProps'

@inject('store')
@observer
class Home extends React.Component {
  get injected(): InjectProps {
    return this.props as InjectProps
  }

  componentDidMount() {
    const { authStore } = this.injected.store
    authStore.init()
  }

  render() {
    const { authStore } = this.injected.store
    console.log(authStore.keycloakInstance)
    try {
      authStore.getProfileData()
    } catch(e) {
      console.log(e)
    }
    console.log(authStore.keycloakInstance)
    return (
      <>
        <Page>
          <h1>Hello you are logged in!</h1>
        </Page>
      </>
    )
  }
}

export { Home }

import { Store } from '../../stores/Store'

export interface InjectProps {
    store: typeof Store.Type;
}