Mobx-state-tree: Application of filter in observable arrays results in a collection of nodes where properties are not accessible anymore

Created on 13 Aug 2020 · 7Comments · Source: mobxjs/mobx-state-tree

_Bug report_

[X] I've checked documentation and searched for existing issues
[X] I've made sure my project is based on the latest MST version

Minimal Reproducer:

https://codesandbox.io/s/nifty-saha-e09lh?file=/src/index.ts:350-351

Code:

import {types as t} from "mobx-state-tree";

const Item = t.model("Item", {
  name: t.string
});

const Container = t.model("Container", {
  items: t.array(Item)
});

const container = Container.create({
  items: [{
    name: "X"
  }]
});

console.log('[1]', container.items[0].name); // X
console.log('[2]', container.items.filter(() => true)[0].name); // undefined

Describe the expected behavior

I'd have expected filter to work similar to Array#filter, and not have any side affect on the behavior of filtered items.

Describe the observed behavior

In the filtered collection, all properties are undefined for node.

Source

lorefnon

Most helpful comment

It's tracked at https://github.com/mobxjs/mobx/issues/2423
This PR will fix an issue: https://github.com/mobxjs/mobx/pull/2426
Meanwhile, two fixes are suggested at this comment
BTW, one clould use arr.slice().filter(...) instead of arr.map(x => x).filter(...).

k-g-a on 13 Aug 2020

👍5

All 7 comments

I just upgraded my dependencies and ran through this same issue. Looks like filter on mst array types no longer return its observable values but raw ObjectModel. Not sure if the culpit of this is MST. Wrapping filter result into values() makes it work but looks like an unintentional API breakage.

knoopx on 13 Aug 2020

👍2

+1 , facing the same issue today , just started using MST today so i'm not quite sure this is a MST issue or something else.

prsnnami on 13 Aug 2020

Although the value property of the ObjectModel gives the required value, i'm not sure if that is reactive or not so not sure if that might be a workaround.

prsnnami on 13 Aug 2020

Also experiencing this.