MobX 声明在 StoreProvider 组件中提供的值无法转换为可观察值

Question

我在 Next.js 应用程序中使用 MobX。问题出在 StoreProvider 组件中。我按照 this website 上的说明进行操作。问题是

[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;
};

这可能是问题的根源。

class CandidatesStore {
  rootStore: RootStore;

  @observable candidates: Array<Candidate>;

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

Answer 1

这个概念是 Mobx 无法观察到任何值，因为它永远不会改变，举个例子，如果你这样做

@observable(3) // 3 will never change, so mobx throws error
// and in case we have such requirement, we either can put 3 in some variable and observe
that variable or do 

const x = observable.box(3) 

//then we can look for changes and make changes with 
x.set(4)
autorun(() => console.log(x))

为什么会遇到这个错误，可能是因为候选人被初始化为undefined

MobX 声明在 StoreProvider 组件中提供的值无法转换为可观察值

MobX stated that there is a provided value cannot be converted to observable in the StoreProvider component

mobx

mobx-react