Passage de MobX @observable de array à React Component props de PropTypes.array

Question

J'utilise donc une bibliothèque de composants UI van React et MobX comme gestion d'état dans mon application. Lorsque j'ai une observable de tableau en tant que données et que je veux passer de mon composant (qui est un mobx-reactobserver) au composant de la bibliothèque de l'interface utilisateur (dont le prop est le type PropTypes.array), le composant le rejette en disant mon tableau observable est un objet, pas un tableau.

// my store 
class Store { 
    @observable data = [...]; 
} 


// my component 
@inject('store') 
@observer 
class MyComponent extends React.Component { 
    ... 
    render() { 
    const {store} = this.props; 
    return <LibComponent data={store.data} /> 
    } 
} 

// library's component 
class LibComponent extends React.Component { 
    static propTypes = { 
    data: PropTypes.array, 
    .... 
    } 
} 

J'ai lu sur l'utilisation de toJS MOBX dans ce question similaire, mais est-il un autre moyen de contourner cela? Comme je ne suis pas le propriétaire de la bibliothèque de l'interface utilisateur, je ne peux pas ajouter de validations PropTypes qui entrent dans le paquet mobx-react mentionné dans cette question comme réponse. La bibliothèque de l'interface utilisateur va-t-elle réagir au changement avec toJS en entrée de son support?

Answer 1

MOBX-REACT est livré avec son propre propTypes, que vous pouvez utiliser: https://github.com/mobxjs/mobx-react#proptypes

Answer 2

Il est parce qu'un tableau MOBX est en fait un objet.

Les documents indiquent que chaque fois qu'une situation comme la vôtre se produit, les données doivent être transmises comme;

data.slice() 

Afin de le transformer en un tableau normal. Etant donné que la bibliothèque en question ne possède probablement pas non plus les décorateurs observateurs, je pense que même si vous deviez faire passer l'observable avec ses qualités réactives, cela ne marcherait pas. Par conséquent, vous devez soit gérer cela comme une donnée non réactive, soit utiliser la bibliothèque pour répondre à ce besoin.