Propriété de magasin Mobx-React indéfinie lors du premier rendu, mais chargement asynchrone des passages de variable

Question

Je gère mon état à l'aide de Mobx. J'appelle une action pour une requête http pour charger des images, puis mettre à jour la propriété pictures, puis mettre à jour la propriété de chargement. Lorsque je charge le composant qui effectue l'appel et console.log les propriétés du magasin, la propriété de chargement est mise à jour, mais la propriété d'image n'est toujours pas définie. Ce n'est pas jusqu'à ce que la seconde render du composant que la propriété de l'image est définie Voici un exemple:

export class PhotoStore { 
@observable picInfo = [] 
@observable loading = true 

@action loadPics() { 
this.loading = true; 
let dataURL = 'some url'; 
return axios.get(dataURL) 
.then(res => {this.picInfo = res.data}) 
.then(this.loading = false) 
} 

class PhotoGallery extends React.Component{ 
componentWillMount(){ 
    this.PhotoStore.loadPics(); 
} 
render(){ 
console.log(//these two properties) 
//returns false and undefined object 
    return(
//some code 
); 
} 

} 

Je sais que je peux vérifier la picInfo.length avant de rendre le JSX, mais je veux faire ce travail. Merci pour tout conseil à l'avance!

Answer 1

Vous n'avez pas besoin de la deuxième clause .then. Lorsque vous définissez this.picInfo, définissez également this.loading. Parce que vous mettez le changement d'état de chargement dans une promesse chaînée, il y a un problème de synchronisation où le @observable essaie d'évaluer avant que le chargement ne soit défini.

Answer 2

https://mobx.js.org/best/actions.html - voir runInAction et le décorateur asyncAction

@action loadPics() { 
    this.loading = true; 
    let dataURL = 'some url'; 
    return axios.get(dataURL) 
    .then(res => {runInAction(() => {this.picInfo = res.data})} 
    .then(runInAction(() =>this.loading = false)) 
}