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

Question

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

收藏按钮。它将特定列表项的 object 推送到存储中名为 'favorites' 的可观察数组中。收藏夹是 object 的可观察数组。

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

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

基本上，它是检查 object 是否在数组中，className 将为 success，如果为假 info.

当收藏夹数组处于本地状态时，这工作得很好。但是我知道收藏夹数组中的 objects 在可观察数组中看起来会有所不同。我知道可观察数组收藏夹与本地数组收藏夹不同。

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

Answer 1

关于 doc: isObservableArray

Returns true if the given object is an array that was made observable using mobx.observable(array).

所以要知道 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

Answer 2

Michel（mobx 创建者）通过 Gitter channel 给了我需要的提示。

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

所以我把它改成了

@observable favorites = []

到

 @observable favorites = observable.shallowArray();

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

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

How to check if object is in Mobx observable array?

reactjs

mobx

mobx-react