Que dois-je faire si les données de chargement d'Uniapp ne peuvent pas être restituées ?

Récemment, j'utilisais uniapp pour développer un petit projet de programme et j'ai rencontré un problème, c'est-à-dire que les données de la page ne pouvaient pas être restituées. Après quelques recherches et réflexions, j'ai finalement trouvé une solution.

Problème

J'ai lancé une demande pour obtenir des données dans la fonction de cycle de vie onLoad de la page, j'ai attribué les données à l'attribut dans data et j'ai utilisé l'attribut dans le modèle pour le rendu. Mais un problème est survenu, les données correspondantes n'ont pas pu être restituées dans le modèle.

Tout d'abord, j'ai éliminé certaines erreurs courantes, telles que les fautes d'orthographe des noms de variables, les types de données qui ne correspondent pas, etc. Cependant, cela n’a pas résolu le problème.

Solution

J'ai réalisé que les données peuvent être rendues avant d'être obtenues, il n'est donc pas possible de les rendre directement dans la fonction de cycle de vie onLoad. En réponse à ce problème, j'ai essayé quelques solutions :

1. Placez la demande de données dans la fonction de cycle de vie créée du composant.

Cette méthode n'est fondamentalement pas réalisable, car dans la fonction de cycle de vie créée, la demande de données est effectuée de manière asynchrone, tandis que le composant de rendu est effectué de manière synchrone et est rendu avant que les données ne soient obtenues.

2. Utilisez la montre pour surveiller les modifications des données.

Cette méthode est réalisable dans mon fonctionnement actuel. Le changement de données est surveillé via la montre. Une fois les données obtenues avec succès, la fonction de montre sera déclenchée puis restituée.

Affichage du code :

export default {
  data() {
    return {
      dataList: []
    }
  },
  watch: {
    dataList: function(val) {
      if (val.length > 0) {
        this.$nextTick(() => {
          //渲染组件的操作
        })
      }
    }
  },
  onLoad() {
    // 发起数据请求,并在成功后赋值给dataList
  }
}

Il convient de noter ici qu'une fois les données obtenues avec succès, la méthode Vue.nextTick doit être utilisée pour restituer le composant, sinon le composant risque de ne pas être complètement rendu.

Conclusion

Dans uniapp, il n'est pas possible de restituer directement les données dans la fonction de cycle de vie onLoad. Vous devez utiliser watch pour surveiller les modifications des données et restituer le composant une fois les données obtenues avec succès.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!