我知道类似的问题已经存在。但是,在检查了许多问题之后,我无法找到解决问题的方法。情况如下:
我希望ReportStore
以数组的形式从服务器获取数据并将其存储在可观察的映射中。提取部分正常,数据正确发送。当我尝试将值写入requestNewReports
方法内部的可观察映射时,会发生问题。这是商店代码:
ReportStore.ts
import api from "../api";
import { observable, action, ObservableMap } from "mobx";
import { IReportMetaData } from "../pages/ManagerView/TicketSales";
import { notificationStore } from "./NotificationStore";
export class ReportStore {
fetchedReports: ObservableMap<number, IReportMetaData>;
constructor() {
this.fetchedReports = observable.map({});
}
async requestNewReports(fromDate: string = '', toDate: string = '') {
try {
const res = await api.get("reports/filtered", {
params: {
fromDate: from,
toDate: to
}
});
res.data.forEach((row: IReportMetaData, index: number) => {
if (!this.fetchedReports.has(index)) {
this.fetchedReports.set(index, row);
}
});
} catch (err) {
return notificationStore.showError(err.message);
}
}
}
export const reportStore = new ReportStore();
该商店在被提供app.tsx
经由<Provider reportStore={reportStore}>....</Provider>
与注入在这样的组件:
export interface ITicketSalesProps {
reportStore?: ReportStore;
}
export const TicketSales = inject('reportStore')(observer((props: ITicketSalesProps) => {
// Component logic
}
被这样称呼:
// inside TicketSales
useEffect(() => {
const { fetchedReports, requestNewReports } = props.reportStore!;
if (fetchedReports.size === 0) {
requestNewReports();
}
}, []);
我的设置: create-react-app
通过npx
用TypeScript
,
"mobx": "^5.15.3",
"mobx-react": "^6.1.4",
根据某些问题,问题出在传统装饰器上。但是,根据官方mobx
文件
仅当在create-react-app@^2.1.1中使用TypeScript时才支持装饰器。在较旧的版本中或使用香草JavaScript时,请使用decorate实用程序,弹出或custom-cra软件包。
这似乎正是我的情况。
因此,我不知道为什么会被破坏...我什至试图弹出并尝试babel插件,如在某些问题中所建议的:
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
但是没有成功。
任何帮助,将不胜感激。
提前致谢!
我认为此问题通常来自您的JavaScript代码,而不是来自mobx。
从这里我可以读到的requestNewReports()
不是绑定方法。在您的组件中,您可以对商店进行解构,然后将requestNewReports分配给新变量,因此"this"
不再是您的商店。因此,您将遇到“未定义”错误。
您可以将其更改为:
// inside TicketSales
useEffect(() => {
const {reportStore} = props
if (reportStore.fetchedReports.size === 0) {
reportStore.requestNewReports();
}
}, []);
或者,您可以将方法绑定到实例,例如:
...
constructor() {
this.fetchedReports = observable.map({});
this.requestNewReports = this.requestNewReports.bind(this)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句