‘mobx-react lite’的观察者不工作

Question

我刚开始练习反应莫克斯，现在我有问题了。观察者不工作了。它似乎没有观察商店。这应该从api加载一些活动列表，并在加载过程中显示图标(加载)。在加载数据之后，它应该将活动显示在框中。它从api中正确加载，我可以在网络检查选项卡中看到。问题就在观察者身上。这是我的activityStore：

import { action, observable } from "mobx";
import { createContext } from "react";
import agent from "../api/agent";
import { IActivity } from "../models/activity";

class ActivityStore {
  @observable activities: IActivity[] = [];
  @observable loadingInitial = false;

  @action loadActivities = () => {
    this.loadingInitial = true;
    agent.Activities.list()
      .then((activities) => {
        activities.forEach((activity) => {
          activity.date = activity.date.split(".")[0];
          this.activities.push(activity);
        });
      })
      .finally(() => {
        this.loadingInitial = false;
      });
  };
}

export default createContext(new ActivityStore());

我像这样使用App.tsx：

import { observer } from "mobx-react-lite";
import ActivityStore from "../stores/activityStore";
import some component from semantic ui react and other codes;

const App = () => {
  const activityStore = useContext(ActivityStore);

  useEffect(() => {
    activityStore.loadActivities();
  }, [activityStore]);

  if (activityStore.loadingInitial)
    return <LoadingComponent content="loading..." inverted={true} />;
  return (
    <Fragment>
      <NavBar createActivity={handleOpenCreateForm} />
      <Container style={{ marginTop: "7em" }}>
        <ActivityDashboard
          activities={activityStore.activities}
        />
      </Container>
    </Fragment>
  );
};

export default observer(App);

Answer 1

我终于找到问题了。在新版本的mobx-react中，您需要在“构造函数”中调用“makeObservable”，如下所示：

class ActivityStore {
  @observable activities: IActivity[] = [];
  @observable loadingInitial = false;

constructor() {
    makeObservable(this);
  }

  @action loadActivities = () => {
    this.loadingInitial = true;
    agent.Activities.list()
      .then((activities) => {
        activities.forEach((activity) => {
          activity.date = activity.date.split(".")[0];
          this.activities.push(activity);
        });
      })
      .finally(() => {
        this.loadingInitial = false;
      });
  };
}