我知道类似的问题已经存在。但是，在检查了许多问题之后，我无法找到解决问题的方法。情况如下：
我希望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] 删除。
我来说两句