MobX заявил, что предоставленное значение не может быть преобразовано в наблюдаемое в компоненте StoreProvider - PullRequest
Новая
       57

MobX заявил, что предоставленное значение не может быть преобразовано в наблюдаемое в компоненте StoreProvider

0 голосов
/ 19 февраля 2020

Я использую MobX в приложении Next. js. Проблема в компоненте StoreProvider. Я следую инструкции на этом сайте . Проблема в 

[mobx] The provided value could not be converted into an observable. If you want just create an observable reference to the object use 'observable.box(value)

Это RootStore 

// import { firestore } from 'firebase';
import CandidatesStore from './CandidateStore';
import AuthStore from './AuthStore';
// import 'firebase/firestore';

class RootStore {
  candidateStore: CandidatesStore;

  authStore: AuthStore;

  constructor() {
    this.candidateStore = new CandidatesStore(this);
    this.authStore = new AuthStore();
  }

  init(): void {
    this.candidateStore.fetchCandidate();
  }
}

export default RootStore;

Это StoreProvider, который консоль сказала, что проблема возникла здесь. 

import * as firebase from 'firebase';
import 'firebase/firestore';
import React from 'react';
import { useLocalStore } from 'mobx-react';
import firebaseConfig from '../constants/firebase.config';
import RootStore from '../core/mobx/RootStore';

const storeContext = React.createContext(null);

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const StoreProvider = ({ children }) => {
  const store = useLocalStore(() => new RootStore());
  return <storeContext.Provider value={store}>{children}</storeContext.Provider>;
};

export default StoreProvider;

export const useStore = (): RootStore => {
  const store = React.useContext(storeContext);
  if (!store) {
    throw new Error('useStore must be used within a StoreProvider');
  }
  return store;
};

Это является CandidateStore, который может быть источником проблемы. 

class CandidatesStore {
  rootStore: RootStore;

  @observable candidates: Array<Candidate>;

  constructor(rootStore: RootStore) {
    this.rootStore = rootStore;
  }
...