Comment vérifier si l'objet est dans un tableau Mobx observable?

Question

J'utilise indexOf dans un composant React pour styler un bouton selon qu'un objet se trouve dans un tableau observable mobx.

Le bouton est pour favoriser. Il pousse l'objet pour cet élément de liste spécifique dans un tableau observable dans le magasin appelé «favoris». favoris est un tableau observable d'objets.

Voici le modèle ES6 littéral de mon bouton:

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

Fondamentalement, il est un chèque si l'objet est dans le tableau, className sera success, si elle est fausse info.

Ceci fonctionne parfaitement lorsque le tableau de favoris est à l'état local. Mais je comprends que les objets dans le tableau des favoris ont un aspect différent une fois qu'ils sont dans le tableau observable. Je comprends que les favoris du tableau observables sont différents des favoris du tableau local.

Mais comment faire un test pour savoir si un objet est dans un tableau observable d'objets? J'ai essayé slice() et peek() et en utilisant le findIndex mais pas de dés.

Answer 1

Michel (créateur MOBX) m'a donné l'indication que je avais besoin via le Gitter channel. En fait, j'avais besoin d'un tableau observable superficiellement, pas profondément observable. Je n'ai pas besoin que toutes les propriétés des objets du tableau soient observables (d'où tous les ensembles/obtient sur les propriétés d'objet que je voyais avant), juste si un objet est ajouté ou enlevé.

donc je l'ai changé de

@observable favorites = [] 

à

@observable favorites = observable.shallowArray(); 

En fin de compte, bien que la réponse de @dagatsoin de droit est si vous avez besoin d'utiliser un tableau profondément observable.

Answer 2

En ce qui concerne la doc:isObservableArray

Renvoie true si l'objet donné est un tableau qui a été fait observable en utilisant mobx.observable (tableau).

donc de savoir si data est dans un tableau favorites observable:

// 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'}`} 

Voici un POC avec une aide de la fonction: https://jsbin.com/botijom/edit?js,console