MobX将对象添加到可观察数组

Question

MobX objects to an observable array

I am unable to push an object into an observable array and have it be something that I can iterate on.

starting point (all data is via the console's log):

if (!self.selectedGlobalFilters) self.selectedGlobalFilters = observable([])

and taking in an object filter.options01 as:

Proxy {Symbol(mobx administration): ObservableObjectAdministration$$1}
  [[Handler]]: Object
    [[Target]]: Object
      key: "status"
      value: "rejected"

...and then attempting a push

self.selectedGlobalFilters.push(filter.options01)

gives me:

[Proxy]
  0: Proxy
    [[Handler]]: Object
      [[Target]]: Object
        key: "status"
        value: "rejected"

then attempting to push another object filter.options02 as:

Proxy {Symbol(mobx administration): ObservableObjectAdministration$$1}
  [[Handler]]: Object
    [[Target]]: Object
      key: "status"
      value: "done"


self.selectedGlobalFilters.push(filter.options02)

gives me:

[Proxy]
  0: Proxy
    [[Handler]]: Object
      [[Target]]: Object
        key: "status"
        value: "done"

So basically 2 issues here, one being that the second push overrides the first, but more-so I would like to have this data as such:

[{…}]
  0: 
    status: "rejected"
  1:
    status: "done"

TLDR; How would I go about achieving this? pushing an object into an observable array in a manner that can be iterated on...

slicing the array has no different effect on the output.

As always any and all direction is appreciated so thanks in advance!

Answer 1

I believe the issues here is that you're only observing a variable and not Mapping the entire array!

@observable selectedGlobalFilters = [];

if (!this.selectedGlobalFilters.length) 
  this.selectedGlobalFilters.push(filter.options01)

..or

const gFilter = toJS(this.selectedGlobalFilters)
  this.selectedGlobalFilters = gFilter.push(filter.options01)

..if symptoms persist:-)