Как проверить, находится ли объект в наблюдаемом массиве Mobx?

Question

Я использую indexOf в компоненте React для стилизации кнопки на основе того, находится ли объект в наблюдаемом массиве mobx.

Кнопка для фаворита. Он помещает объект для этого конкретного элемента списка в наблюдаемый массив в хранилище под названием "избранное". избранное - это наблюдаемый массив объектов.

Вот литерал шаблона ES6 от моей кнопки:

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

По сути, это проверка, если объект находится в массиве, className будет successесли ложно info,

Это прекрасно работает, когда массив избранного находится в локальном состоянии. Но я получаю, что объекты в массиве избранного выглядят по-разному, как только они находятся в наблюдаемом массиве. Я получаю, что наблюдаемые массивы избранного отличаются от избранного локального массива.

Но как мне проверить, находится ли объект в наблюдаемом массиве объектов? Я старался slice() а также peek() и с помощью findIndex, но без кости.

Answer 1

Мишель (создатель mobx) дал мне подсказку, которая мне была нужна через канал Gitter.

На самом деле мне нужен был мелко наблюдаемый массив, а не глубоко наблюдаемый. Мне не нужно, чтобы каждое свойство объектов в массиве было наблюдаемым (отсюда все наборы / значения свойств объекта, которые я видел ранее), независимо от того, был ли объект добавлен или удален.

Так что я изменил это с

@observable favorites = []

в

 @observable favorites = observable.shallowArray();

В конечном счете, ответ @dagatsoin верен, если вам нужно использовать глубоко наблюдаемый массив.

Answer 2

Относительно документа:isObservableArray

Возвращает true, если данный объект является массивом, который был сделан наблюдаемым с помощью 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