reactjs - React mobx ไม่สามารถรับค่าของ observable ได้

ด้านล่างนี้คือสโตร์ของฉันซึ่งจะดึง 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());

จากนั้นเมื่อฉันต้องการใช้ observable 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 ที่สังเกตได้ ซึ่งเป็นเพียงสตริงเดียว Component โหลดก็ไม่ทำงานเช่นกัน กรุณาช่วยฉันด้วย!

คำตอบ #1

ฉันหาทางออกเรื่องนี้เจอแล้ว เวอร์ชันของ Mobx ควรต่ำกว่า 6.0.0 ฉันใช้ 5.10.1 และทุกอย่างก็เรียบร้อยดี