如何检查对象是否在Mobx可观察数组中？

Question

我正在使用indexOfReact组件来根据对象是否在mobx可观察数组中来设置按钮的样式.

该按钮用于收藏.它将该特定列表项的对象推送到名为"favorites"的商店中的可观察数组中.收藏夹是一个可观察的对象数组.

这是我的按钮中的ES6模板文字:

className={`btn-group ${((this.props.store.favorites.indexOf(this.props.data) > -1)) ? 'success' : 'info'}`}

基本上,它检查对象是否在数组中success,如果为false,则为className info.

当收藏夹数组处于本地状态时,这非常正常.但是我发现收藏夹数组中的对象在可观察数组中看起来有所不同.我得到的是可观察数组的收藏夹与本地数组收藏夹不同.

但是,如何测试对象是否在可观察的对象数组中呢？我试过slice()并peek()使用findIndex但没有骰子.

Answer 1

关于文档： isObservableArray

如果给定的对象是一个使用 mobx.observable(array) 可观察的数组，则返回 true。

所以要知道是否data在一个可观察的favorites数组中：

// If data is a primitive
className={`btn-group ${mobx.isObservableArray(this.props.store.favorites) && this.props.store.favorites.indexOf(this.props.data) > -1 ? 'success' : 'info'}`}

// Id data is an object it is a little more verbose and coupled to your data
// structure. You have to use the `find` function to iterate and test if an 
// element in the array has the same id.
className={`btn-group ${mobx.isObservableArray(this.props.store.favorites) && !!this.props.store.favorites.find(fav => fav.id === this.props.data.id) ? 'success' : 'info'}`}

这是一个带有函数助手的 POC：https : //jsbin.com/botijo​​m/edit? js, console

Answer 2

Michel（mobx 创建者）通过Gitter 频道给了我所需的提示。

我实际上需要一个浅层可观察的数组，而不是一个深度可观察的数组。我不需要数组中对象的每个属性都是可观察的（因此我之前看到的对象属性上的所有设置/获取），只需添加或删除对象即可。

所以我把它从

@observable favorites = []

到

 @observable favorites = observable.shallowArray();

最终，如果您需要使用深度可观察的数组，@dagatsoin 的答案是正确的。