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

Question

I know that several similar issues like that exist already. However, having reviewed many of them I was not able to find solution to my problem. Here is the situation:
I want my ReportStore to fetch data from the server in form of an array and store them in an observable map. Fetching part is OK, the data is coming correctly. The problem occurs when I try to write values to observable map inside of requestNewReports method. Here is the store code:
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();
The store is being provided in app.tsx via <Provider reportStore={reportStore}>....</Provider> and injected in the components like that:
export interface ITicketSalesProps {
reportStore?: ReportStore;
}
export const TicketSales = inject('reportStore')(observer((props: ITicketSalesProps) => {
// Component logic
}
And being called like that:
// inside TicketSales
useEffect(() => {
const { fetchedReports, requestNewReports } = props.reportStore!;
if (fetchedReports.size === 0) {
requestNewReports();
}
}, []);
My setup:
create-react-app via npx with TypeScript,
"mobx": "^5.15.3",
"mobx-react": "^6.1.4",
According to some issues the problem lies in legacy decorators. However,according to official 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.
Which seems to be exactly my case.
Hence I am out of ideas of why it can be broken...
I even tried to eject and try babel plugin as was suggested in some issues:
{
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
But no success.
Any help would be appreciated.
Thanks in advance!

Answer 1

I think this issue comes from your javascript code in general and not mobx.
From what I can read here, requestNewReports() is not a bound method. In your component you destructure your store and assign requestNewReports to a new variable so "this" is not your store anymore. Thus you have the "undefined" error.
You could change it to:
// inside TicketSales
useEffect(() => {
const {reportStore} = props
if (reportStore.fetchedReports.size === 0) {
reportStore.requestNewReports();
}
}, []);
Or, you could bind the method to the instance like:
...
constructor() {
this.fetchedReports = observable.map({});
this.requestNewReports = this.requestNewReports.bind(this)
}