如何解决来自“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;
});
};
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。