I have a Mobx store with two functions: loadClothetTypePrice and getClotheTypePriceReletedItems.
The loadClothetTypePrice function loads a list of cloth type prices from an API and sets them in an array called ClotheTypePriceList.
The getClotheTypePriceReletedItems function filters the ClotheTypePriceList array based on a clotheTypeID parameter and populates a separate array called clotheTypePriceFilteredDropdown with the filtered results.
When I first load the form, I call loadClothetTypePrice to populate the ClotheTypePriceList array, and then call getClotheTypePriceReletedItems to filter the results. This works correctly.
However, when I go to list page and refresh it and when select one of the data in the list for editing its redirect me to the form page and call getClotheTypePriceReletedItems again to get the filtered results, the ClotheTypePriceList array is empty, even though I have called loadClothetTypePrice again to repopulate the array.
Here's an example of my code:
// Mobx store code
export default class DropdownStore {
ClotheTypePriceList: ClotheTypePriceDropdown[] = [];
clotheTypePriceFilteredDropdown: SelectControl[] = [];
constructor() {
makeAutoObservable(this);
}
loadClothetTypePrice= async () => {
try {
const result = await agent.Dropdown.clotheTypePriceDropdown();
runInAction(()=>{
this.ClotheTypePriceList=result;
})
} catch (error) {
console.log(error);
}
};
getClotheTypePriceReletedItems=(clotheTypeID:number)=>{
this.clotheTypePriceFilteredDropdown=[];
const items=this.ClotheTypePriceList.filter((op)=>op.clotheTypeID===clotheTypeID);
items.map((f)=>{
const row={
text:f.clotheTypePriceNameE,
value:f.clotheTypePriceID
}
this.clotheTypePriceFilteredDropdown.push(row)
})
}
}