React Mobx无法获得可观察的价值

问题描述

下面是我的商店，该商店将通过使用units方法从API检索可观察的loadUnits，该API运作良好，我还在此处添加了console.log()，我可以看到第一个元素的值。

import { ITutorialUnit } from "./../model/unit";
import { action,observable } from "mobx";
import { createContext } from "react";
import agent from "../api/agent";

class UnitStore {
  @observable units: ITutorialUnit[] = [];
  @observable title = "hello from mobx";
  @observable loadingInitial = false;

  @action loadUnits =  () => {
    this.loadingInitial = true;
    agent.TutorialUnits.list()
      .then(units => {
        units.forEach((unit) => {
          this.units.push(unit);
        });
      })
      .then(() => console.log("from store:" + this.units[0].content))  // I can see the data from this logging
      .finally(() => (this.loadingInitial = false));
  };
}
export default createContext(new UnitStore());

然后，当我想在units中使用可观察的App.tsx时：

import React,{ Fragment,useContext,useEffect,useState } from "react";
import { Container } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import NavBar from "../../features/nav/NavBar";
import { ActivityDashboard } from "../../features/Units/dashboard/tutorialUnitDashboard";
import UnitStore from "../stores/unitStore";
import { observer } from "mobx-react-lite";
import { LoadingComponent } from "./LoadingComponent";
import agent from "../api/agent";
import { ITutorialUnit } from "../model/unit";

const App = () => {
  const unitStore = useContext(UnitStore);
  const units = unitStore;
  useEffect(() => {
    unitStore.loadUnits();
    console.log("from App.tsx: " + units);           // will only log a undefined
  },[unitStore]);
  if (unitStore.loadingInitial) {
    return <LoadingComponent content="Loading activities..." />;
  }

  return (
    <Fragment>
      <NavBar />

      <Container style={{ marginTop: "7em" }}>
        <h1>{unitStore.title}</h1>
        <ActivityDashboard />
      </Container>
    </Fragment>
  );
};

export default observer(App);

我无法获取可观察的units的数据，但是我可以获取另一个可观察的title的数据，它只是一个字符串，LoadingComponent也不起作用。 请帮助我！

解决方法

我知道了。 Mobx的版本应低于6.0.0，我使用5.10.1，一切都很好。