Mobx неловкий случай. если я console.log (userStore), то он обновляет компонент

Question

Я сделал userStore для управления состоянием аутентификации.Когда firebase auth успешно извлекает данные аутентификации, userStore действия для изменения свойства loading.

class userStore {
  constructor() {
    auth.onAuthStateChanged(user => {
      this.login(user)
      this.loadingDone()
    })
  }

  @observable user
  @observable loading = true

  @computed get getUser() {
    return this.user
  }

  @computed get getLoading() {
    if (this.user) {
      return false
    }
    return this.loading
  }

  @action
  login(user) {
    this.user = user
  }

  @action
  logout() {
    this.user = null
  }

  @action
  loadingDone() {
    this.loading = false
    console.log(this.loading)
  }
}

Теперь я хочу изменить свой компонент PrivateRoute на свойство userStore.loading.Но без console.log(userStore.getLoading) MOBX НЕ ОБНОВЛЯЕТ КОМПОНЕНТ.

@observer(['userStore'])
class PrivateRoute extends Component {
  render() {
    const { component: Component, userStore } = this.props
    console.log(userStore.getLoading) # <- WHAT HAPPENS HERE?????
    return (
      <Route
        render={props =>
          userStore.getLoading ? (
            <div>getting auth...</div>
          ) : userStore.getUser ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: '/login',
                state: { from: props.location }
              }}
            />
          )
        }
      />
    )
  }
}

Я не могу понять поведение Mobx по умолчанию.Это зависит от console.log?

Answer 1

Mobx обнаруживает изменение компонента по свойству, которое вы используете в компоненте.поэтому, когда вы console.log (userStore.getLoading), mobx знает, что ваш компонент зависит от этой загрузки, а затем повторно визуализируйте ваш компонент при его изменении.

использование userStore.getLoading в маршруте ниже не считается (вероятно, из-заон определен в другом функциональном компоненте) эта статья может помочь

, поэтому вы можете разделить компонент в Route на отдельный компонент и пометить его как наблюдатель.это будет работать