Indique cómo resolver el siguiente problema:
Hay un componente que genera algún contador:
@observer class MyComponent extends React.Component { render() { const data: MyData = new MyData(); return <div>{data['counter']}</div>; } }El contador se almacena en un singleton rastreable (a través de mobx @observable):
export class MyData extends ISingleton { @observable data: any = {} }En algún momento, el contador (cuando MyComponent ya está creado) se establece el contador
let data: MyData = new MyData(); data['counter'] = 123;Pero MyComponent no se vuelve a dibujar, aunque el componente parece rastrear el cambio de variable (a través de mobx @observer y @observable)
Indique dónde está el error y cómo se puede solucionar.
En mobx necesitas manipular el estado de los observadores dentro de las acciones.
Deberías extender tu singleton para que se vea así:
export class MyData extends ISingleton { @observable data: any = {} @action setCounter(val: number) { this.data = val } }Luego llame al método setCounter en lugar de manipular el estado directamente.
Tenga en cuenta que, a partir de la versión 6 de MobX, se desaconseja utilizar la API de decoración (consulte esto para obtener más información ).
Cada renderizado crea un nuevo objeto de data completamente nuevo, restableciéndolo de manera efectiva. Por lo tanto, desea almacenar data en la instancia de clase, no dentro del renderizado. Además, los datos que está modificando son datos completamente diferentes a los datos que está representando (eso es lo que hace la new palabra clave). Probablemente quiera leer un poco sobre cómo funcionan los objetos, las clases y las instancias en JavaScript en general.