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

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

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

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

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

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

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

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


reactjs mobx mobx-react
person Kyle Pennell    schedule 19.04.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Что касается doc: 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

person dagatsoin    schedule 19.04.2017
comment
как я вижу, держу пари, this.props.data это не строка? Отредактирую свой ответ. См. POC здесь jsbin.com/botijom/edit?js,console - person dagatsoin; 19.04.2017
comment
В конечном итоге мне понадобился неглубокий массив для этого случая, но вам нужно знать о нем - person Kyle Pennell; 20.04.2017

arrow_upward
3
arrow_downward

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

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

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

@observable favorites = []

to

 @observable favorites = observable.shallowArray();

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

person Kyle Pennell    schedule 20.04.2017