来自“mobx-react-lite”的观察者不工作

问题描述

我刚开始练习react mobx，现在遇到了问题。观察者不工作。 它似乎没有观察商店。 这应该从 api 加载一些活动列表，并在加载期间显示图标（加载）。加载数据后，它应该在框中显示活动。 它从 api 正确加载，我可以在网络检查选项卡中看到。 问题正是在观察者身上。 这是我的活动商店：

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

解决方法

我终于找到了问题所在。 在 mobx-react-lite 的新版本中 您需要在“构造函数”中调用“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;
      });
  };
}