actions Cascading pas rendu

Question

que je fais quelque chose comme ceci:

import { observable, action } from 'mobx'; 

export default class DataStore { 
    @observable pageData:object 

    @action fetch() { 
    superagent.get(url1) 
    .send('got url 1', action((err, results) => { 
     if (err) 
     return; 
     this.pageData = this.pageData || {}; 
     this.pageData.urlData1 = results; 
     this.fetchAnother(); 
    })); 
    } 

    @action fetchAnother() { 
    superagent.get(url2) 
    .send('got url 2', action((err, results) => { 
     if (err) 
     return; 
     this.pageData = this.pageData || {}; 
     this.pageData.urlData2 = results; 
    })); 
    } 
} 

Ces actions sont séparés parce que parfois fetchAnother est appelé par lui-même. J'injecte le magasin dans ma classe de composant React. Lorsque fetch est appelée, le premier rappel asynchrone enveloppé dans action met à jour la page et urlData1 est rendu. Puis le 2ème rappel dans fetchAnother est appelé et s'exécute, mais ne rend pas, et urlData2 ne montrera que si je force un ré-rendu d'une autre manière. Pourquoi, et comment puis-je résoudre ce problème? MobX ne prend pas en charge dynamiquement l'ajout de champs à des objets simples.

Answer 1

Soit utiliser une carte observable ou initialiser les champs à l'avance:

pageData = { urlData1: null, urlData2: null }