TypeError : Impossible de lire la propriété « XXX » de non définie dans le projet Vue, comment y faire face ?

Lors du développement dans le projet Vue, je rencontre parfois des erreurs telles que TypeError: Cannot read property 'XXX' of undefined, qui se manifestent par des problèmes tels que l'impossibilité de rendre la page et l'impossibilité d'obtenir les données. Ce type d'erreur peut se produire dans divers scénarios tels que la transmission de données, la communication de composants, les requêtes asynchrones, etc. lors de l'utilisation du framework Vue. Cet article détaillera les causes et les solutions à cette erreur.

1. Causes

TypeError : Impossible de lire la propriété 'XXX' d'un élément non défini pour diverses raisons. Voici quelques situations courantes :

1. Accès aux propriétés d'un objet non défini

Dans ce cas, les deux peuvent être rencontrés. la page est rendue, ou elle peut être détectée lorsque la page est chargée.

Par exemple :

const obj = {};
console.log(obj.xxx); //TypeError: Cannot read property 'xxx' of undefined

Cette erreur indique une tentative d'accès à une propriété xxx non définie.

2. Erreur lors de l'obtention des données de requête asynchrone

Lors de la demande de données, pour diverses raisons, les données renvoyées par la requête peuvent être vides ou indéfinies.

Par exemple :

axios.get('/api/data').then(res => {
  const data = res.data;
  console.log(data.xxx); //TypeError: Cannot read property 'xxx' of undefined
}).catch(err => {
  console.log(err);
})

Dans ce cas, si les données renvoyées par le serveur sont vides ou indéfinies, une erreur sera signalée lors de la tentative d'accès à ses propriétés.

3. Accès à un composant détruit

Dans un composant Vue, si les propriétés ou les méthodes du composant sont toujours accessibles lorsque le composant est détruit, cette erreur se produira.

Par exemple :

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.timer = setTimeout(() => {
      this.list = [1, 2, 3];
    }, 1000);
  },
  beforeDestroy () {
    clearTimeout(this.timer);
  }
}

Dans ce composant, un timer est créé et l'attribut de liste dans les données du composant est modifié après 1 seconde. Cette erreur se produira si le composant est détruit avant l'exécution du minuteur.

4. Le composant parent n'a pas transmis l'attribut props

Dans le composant Vue, si l'attribut props doit être transmis via le composant parent, si l'attribut n'est pas transmis dans le composant parent, cette erreur se produira.

Par exemple :

<template>
  <my-component :list="list"></my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

Dans cet exemple, l'attribut list n'est pas défini dans le composant parent, mais l'attribut list est lié au composant enfant via des accessoires, ce qui provoquera cette erreur.

2. Solution

1. Vérifiez s'il y a des propriétés non définies dans le code

Lorsqu'une erreur telle que TypeError : Impossible de lire la propriété 'XXX' de non définie se produit, la première étape doit être de vérifier s'il existe un accès non défini dans le code. propriétés du code. Vous pouvez trouver l'emplacement spécifique de l'erreur en ajoutant des points d'arrêt, en imprimant des objets d'erreur, etc.

2. Traitement des données de requête asynchrone

Lors d'une requête asynchrone, les données renvoyées doivent être vérifiées pour s'assurer qu'elles ne sont pas indéfinies.

Par exemple :

axios.get('/api/data').then(res => {
  const data = res.data;
  if (data) {
    console.log(data.xxx);
  } else {
    console.log('返回的数据为空或者为 undefined');
  }
}).catch(err => {
  console.log(err);
});

Évitez les erreurs causées par l'accès à undefined en vérifiant les données renvoyées avant d'obtenir les données.

3. Ajouter un crochet de cycle de vie des composants

Dans le crochet de cycle de vie des composants, vous pouvez contrôler la création et la destruction des composants pour éviter d'accéder aux composants détruits.

Par exemple :

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.timer = setTimeout(() => {
      if (!this._isDestroyed) {
        this.list = [1, 2, 3];
      }
    }, 1000);
  },
  beforeDestroy () {
    clearTimeout(this.timer);
    this._isDestroyed = true;
  }
}

En ajoutant l'attribut _isDestroyed, empêchez l'accès aux propriétés du composant lorsque celui-ci a été détruit.

4. Définir les valeurs par défaut

Lors de l'utilisation des attributs props, vous devez définir des valeurs par défaut pour éviter de générer des erreurs si elles ne sont pas définies dans le composant parent.

Par exemple :

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}

Lorsque le composant parent ne transmet pas l'attribut list, le tableau vide par défaut est utilisé.

En bref, lors du développement d'un projet Vue et qu'une erreur telle que TypeError : Impossible de lire la propriété 'XXX' de undéfini se produit, vous devez d'abord trouver la cause de l'erreur, puis adopter une stratégie de solution appropriée. Ces solutions résolvent non seulement le problème, mais nous aident également à mieux comprendre les mécanismes de Vue tels que le flux de données et la communication des composants.

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!