React mobx 无法获取 observable 的值

Question

下面是我的商店，它将使用 loadUnits 方法从 API 中检索可观察的 units，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());

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

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);

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

Answer 1

我想通了。 Mobx的版本应该在6.0.0以下，我用的是5.10.1，一切正常

React mobx 无法获取 observable 的值

React mobx can't get observable's value

typescript

reactjs

mobx