'mobx-react-lite' 的观察员不工作

Question

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

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-lite 中你需要在 'constructor' 中调用 '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;
      });
  };
}

'mobx-react-lite' 的观察员不工作

observer from 'mobx-react-lite' not working

reactjs

mobx

mobx-react-lite