React Mobx 无法显示可观察内容，非常简单的应用

非常简单的应用程序，我正在尝试使用 Mobx 和 Axios 显示来自我的 API 的内容，这是我的 Axios agent.ts：

import { ITutorialUnit } from './../model/unit';
import axios, { AxiosResponse } from "axios";

//set the base URL
axios.defaults.baseURL = "http://localhost:5000/api";

//store our request in a const
const responseBody = (response: AxiosResponse) => response.data;

const requests = {
  get: (url: string) => axios.get(url).then(responseBody),
};

//create a const for our activty's feature,all our activities' request are go inside our Activities object
const TutorialUnits = {
  list: ():Promise<ITutorialUnit[]> => requests.get("/tutorialunits"),
};

export default{
    TutorialUnits
}

然后我在商店中调用这个 agent.s：

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 for loading indicator
  @observable loadingInitial = false;

  @action loadUnits = async () => {
    //start the loading indicator
    this.loadingInitial = true;
    try {
      //we use await to block anything block anything below list() method
      const units = await agent.TutorialUnits.list();
      units.forEach((unit) => {
        this.units.push(unit);
      //  console.log(units);
      });
      this.loadingInitial = false;
    } catch (error) {
      console.log(error);
      this.loadingInitial = false;
    }
  };
}
export default createContext(new UnitStore());

然后我在我的App组件中调用它：

import React, { Fragment, useContext, useEffect } 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";

const App = () => {
  const unitStore = useContext(UnitStore);
  
  
  useEffect(() => {
    unitStore.loadUnits();
    //need to specify the dependencies in dependenciy array below
  }, [unitStore]);
  //we are also observing loading initial below 
  if (unitStore.loadingInitial) {
    return <LoadingComponent content="Loading contents..." />;
  }

  return (
    <Fragment>
      <NavBar />
      <Container style={{ marginTop: "7em" }}>
        <ActivityDashboard />
      </Container>
    </Fragment>
  );
};

export default observer(App);

最后，我想使用这个组件来显示我的内容：

import { observer } from "mobx-react-lite";
import React, { Fragment, useContext } from "react";
import { Button, Item, Label, Segment } from "semantic-ui-react";
import UnitStore from "../../../app/stores/unitStore";

const UnitList: React.FC = () => {
  const unitStore = useContext(UnitStore);
  const { units } = unitStore;
  console.log(units)
  return (
    <Fragment>
      {units.map((unit) => (
        <h2>{unit.content}</h2>
      ))}
    </Fragment>
  );
};

export default observer(UnitList);

我看不到单位.. 问题出在哪里？我的 API 工作正常，我用 Postman 测试过。谢谢！！