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

Question

我在React组件中使用indexOf来根据对象是否位于mobx可观察数组中来设置按钮的样式。

该按钮是用于收藏。它将该特定列表项目的对象推送到名为“收藏夹”的商店中的可观察数组中。收藏夹是可观察的对象数组。

这里是ES6模板从我的按钮文字：

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

基本上，这是因为如果对象是数组中的支票，类名会success，如有虚假info。

当收藏夹阵列处于本地状态时，此功能完全正常。但是我知道，收藏夹数组中的对象一旦处于可观察数组中就会看起来不同。我知道可观察的数组收藏夹不同于本地数组收藏夹。

但我该如何做一个对象是否在可观察的对象数组中的测试？我尝试slice()和peek()并使用findIndex但没有骰子。

Answer 1

米歇尔（mobx创造者）给我我需要的提示通过Gitter channel。

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

所以我改变了它从

@observable favorites = [] 

到

@observable favorites = observable.shallowArray(); 

不过说到底@dagatsoin的答案是正确的，如果你需要使用一个深刻观察的阵列。

Answer 2

关于doc:isObservableArray

如果给定的对象是指使用mobx.observable（阵列）可观察到的制成的阵列

返回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/botijom/edit?js,console