MOBX changement ne observables déclenchent pas toujours des composants d'observateurs rendent

Question

Mon projet est construit sur React, et pour la gestion de l'État MOBX est utilisé. Nous n'utilisent pas les décorateurs, de sorte que les composants qui doivent observer les observables, doivent être emballés de la manière suivante:

import React from 'react'; 
import {observer} from 'mobx-react'; 
import MyComponent from '../app/my-component.jsx'; 
import myFilter from './my-filters.jsx'; 

export default observer(() => { 
    return <MyComponent filter={myFilter}/>; 
}); 

Le composant MyComponent reçoit le observables comme accessoires:

static propTypes() { 
    return { 
     myFilter: React.PropTypes.function.isRequired 
    }; 
    } 

Et il est utilisé dans la méthode render:

render() { 
    if (this.props.myFilter.filterValue1 !== null) { 
    // some code here 
    } 
} 

myFilter dans ce cas est l'observable, WHIC h ressemble en quelque sorte comme ceci:

import {observable} from 'mobx'; 

const myFilter = observable({ 
    filterValue1: null, 
    filterValue2: null, 
    addOrRemoveItem() { 
    // some function here 
    } 
}); 

export default myFilter; 

Dans ce cas, si un composant modifie myFilter, l'observateur MyComponent qui reçoit l'observable comme accessoires, ne re-rend pas toujours. Dans certains cas, cela peut être résolu en adressant l'objet observable par attribut avant l'appel du composant. E.g .:

export default observer(() => { 
    console.log(myFilter.filterValue1); 
    return <MyComponent filter={myFilter}/>; 
}); 

Mais ce n'est pas stable. Existe-t-il une solution de contournement valide pour éviter cela?

Answer 1

Declare MyComponent à titre d'observateur.

exportation app/my-component.jsx devrait ressembler à ceci

export default observer(MyComponent); 

Ce morceau de code

export default observer(() => { 
    return <MyComponent filter={myFilter}/>; 
}); 

transforme un composant sans état anonyme , pas MyComponent, en qualité d'observateur.

La documentation de MobX indique clairement que vous devez appliquer observer à tous les composants qui rendent des données observables ou vous rencontrerez des problèmes.

L'autre façon de résoudre le problème adopterions données brutes de ce composant sans état anonyme dans MyComponent.

export default observer(() => { 
    return <MyComponent filterValue1={myFilter.filterValue1}/>; 
}); 

Cette MyComponent façon sera parce qu'il reçoit nouveau rendu de nouveaux accessoires chaque fois que son parent est nouveau rendu.

Answer 2

Alik est juste, vous avez besoin MyComponent d'être un observateur aussi bien.

Sinon, votre code <MyComponent filter={myFilter}/> à l'intérieur de la seule observable que vous avez signifie que vous voulez vous rafraîchir uniquement lorsque l'objet myFilter (c.-à-d. Référence) change. Il n'accède à aucune de ses propriétés et l'actualisation n'est donc pas nécessaire lorsque ces propriétés changent. C'est pourquoi votre composant a été actualisé lorsque vous avez accédé à la propriété filterValue1 dans l'instruction console.log.