更新自身内可观察到的 mobx 存储导致 'Cannot read property of <observable> of undefined'

Question

我知道已经存在几个类似的问题。但是，在审查了其中的许多内容后，我无法找到解决问题的方法。情况是这样的：

我希望我的 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();

商店是通过 <Provider reportStore={reportStore}>....</Provider> 在 app.tsx 中提供的，并像这样注入组件：

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 documentation

Decorators are only supported out of the box when using TypeScript in create-react-app@^2.1.1. In older versions or when using vanilla JavaScript use either the decorate utility, eject, or the customize-cra package.

这似乎正是我的情况。

因此我不知道为什么它会被破坏... 我什至尝试按照某些问题中的建议弹出并尝试 babel 插件：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}

但是没有成功。

如有任何帮助，我们将不胜感激。

提前致谢！

Answer 1

我认为这个问题一般来自您的 javascript 代码而不是 mobx。

据我在这里读到的内容，requestNewReports() 不是 绑定方法 。在您的组件中，您解构了您的商店并将 requestNewReports 分配给一个新变量，因此 "this" 不再是您的商店。因此你有 "undefined" 错误。

您可以将其更改为：

// inside TicketSales
useEffect(() => {
  const {reportStore} = props
  if (reportStore.fetchedReports.size === 0) {
    reportStore.requestNewReports();
  }
}, []);

或者，您可以将方法绑定到实例，例如：

...
  constructor() {
    this.fetchedReports = observable.map({});
    this.requestNewReports = this.requestNewReports.bind(this)
  }

更新自身内可观察到的 mobx 存储导致 'Cannot read property of <observable> of undefined'

Updating mobx store observable within self results in 'Cannot read property of <observable> of undefined'

typescript

reactjs

mobx

mobx-react

react-hooks