Issue with Pushing MobX Objects to an Observable Array
I'm facing a challenge when trying to push objects into an observable array in MobX and iterate over them successfully.
At the starting point, I initialize the observable array:
if (!self.selectedGlobalFilters) self.selectedGlobalFilters = observable([])
Then I try to push the object filter.options01:
Proxy {Symbol(mobx administration): ObservableObjectAdministration$$1}
[[Handler]]: Object
[[Target]]: Object
key: "status"
value: "rejected"
However, upon pushing it using:
self.selectedGlobalFilters.push(filter.options01)
The result is:
[Proxy]
0: Proxy
[[Handler]]: Object
[[Target]]: Object
key: "status"
value: "rejected"
Subsequently, attempting to push another object, filter.options02, shows a similar behavior:
Proxy {Symbol(mobx administration): ObservableObjectAdministration$$1}
[[Handler]]: Object
[[Target]]: Object
key: "status"
value: "done"
self.selectedGlobalFilters.push(filter.options02)
Resulting in:
[Proxy]
0: Proxy
[[Handler]]: Object
[[Target]]: Object
key: "status"
value: "done"
The main issues are that the second push overrides the first and the desired data structure should be like this:
[{…}]
0:
status: "rejected"
1:
status: "done"
TLDR; How can I achieve the desired outcome of pushing objects into an observable array that can be iterated on effectively?
Slicing the array has not produced any different outcome. Any guidance or assistance on this matter would be greatly appreciated. Thank you!