Comment résoudre « TypeError : Impossible de lire la propriété « xxx » de null » dans l'application Vue ?

Dans les applications Vue, les développeurs rencontrent souvent TypeError : Impossible de lire la propriété 'xxx' de null, où "xxx" peut être remplacé par n'importe quelle variable, propriété ou nom de méthode. Cette erreur se produit généralement lors de l'accès à une valeur nulle ou à une variable non définie. , propriété ou méthode. Dans cet article, nous discuterons en détail des causes de cette erreur et vous proposerons trois solutions possibles pour votre référence.

Causes de cette erreur :

1. Accès à des variables, propriétés ou méthodes non définies

Lorsque nous utilisons le framework Vue pour développer des applications, nous définissons parfois certaines variables, propriétés ou méthodes dans le modèle de données et les utilisons dans l'accès au code. dans. Cependant, si nous ne définissons pas ces variables, propriétés ou méthodes avant d'y accéder, ou si elles sont définies mais mal orthographiées, cette erreur se produira.

Par exemple, dans le code suivant, la variable "name" n'a pas été définie, donc l'accès à "name" signalera une erreur TypeError: Cannot read property 'name' of null :

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  data(){
    return {
      age: 18,
      gender: 'male',
    }
  }
}
</script>

2. Lors du chargement des données de manière asynchrone, le chargement des données en premier n'est pas pris en compte

Une autre raison est que lors du rendu des données de manière asynchrone, si les données sont chargées en premier, cette erreur se produira. Comme indiqué ci-dessous :

<template>
  <div>{{user.name}}</div>
</template>

<script>
export default{
  data(){
    return {
      user: null,
    }
  },
  created(){
    this.fetchData();
  },
  methods: {
    fetchData(){
      this.$http.get('/user').then(response => {
        this.user = response.data;
      });
    }
  }
}
</script>

Lorsque nous utilisons le chargement asynchrone des données, nous devons d'abord nous assurer d'attribuer une valeur à la variable "user", sinon l'accès à "user.name" signalera une TypeError : Cannot read property 'name' of erreur nulle.

3. Les accessoires ne sont pas transmis lors de l'imbrication des composants

Dans les applications Vue, nous utilisons souvent l'imbrication de composants pour organiser le code. Lorsqu'une variable ou une propriété est définie dans le composant parent et transmise au composant enfant, si la variable ou la propriété n'est pas transmise, le composant enfant accédera à une valeur nulle et cette erreur se produira. Par exemple, dans le code suivant, le composant enfant "child-component" n'a pas l'attribut "message" :

<!-- Parent Component -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default{
  components: {
    ChildComponent,
  },
  data(){
    return {
      message: 'Hello World!',
    }
  }
}
</script>

<!-- Child Component -->
<template>
  <div>{{message}}</div>
</template>

<script>
export default{
  props: [],
  data(){
    return {
      name: 'Alice',
    }
  }
}
</script>

Dans l'exemple ci-dessus, lorsque le composant parent est chargé, la variable "message" définie par le composant enfant est nulle car le composant enfant ne définit pas « props » », donc la propriété qui lui est transmise ne peut pas être reçue, ce qui entraîne une erreur TypeError : Cannot read property 'message' of null lors de l'accès à « message ».

Solution :

1. Avant d'accéder aux variables, propriétés ou méthodes, assurez-vous qu'elles sont définies et orthographiées correctement

Nous pouvons définir des variables, des propriétés ou des méthodes dans le modèle de données ou les méthodes du composant Vue et garantir qu'elles sont accessibles. dans les variables, propriétés ou méthodes du code avant qu'elles n'aient été définies et orthographiées correctement. Comme indiqué ci-dessous :

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  data(){
    return {
      name: 'Alice',
      age: 18,
      gender: 'female',
    }
  }
}
</script>

2. Avant le rendu des données, assurez-vous que les données ont été chargées

Lorsque nous utilisons le chargement asynchrone des données, nous devons nous assurer que les données sont chargées avant le rendu. Vous pouvez utiliser la méthode asynchrone dans. le hook créé ou monté, comme indiqué ci-dessous :

<template>
  <div>{{user.name}}</div>
</template>

<script>
export default{
  data(){
    return {
      user: null,
    }
  },
  created(){
    this.fetchData();
  },
  methods: {
    async fetchData(){
      const response = await this.$http.get('/user');
      this.user = response.data;
    }
  }
}
</script>

Lors du chargement de données de manière asynchrone, nous pouvons utiliser la méthode async dans le hook créé ou monté pour garantir que les données sont chargées avant le rendu. Dans le code ci-dessus, nous utilisons async et wait pour encapsuler la méthode $http.get() afin de garantir qu'elle ne sera pas rendue avant le chargement des données.

3. Lorsque vous transmettez un attribut, assurez-vous que le sous-composant a défini l'attribut.

Lors de la définition d'un attribut dans le composant parent et de sa transmission au sous-composant, vous devez vous assurer que le sous-composant a défini l'attribut. utilisez des accessoires pour définir les propriétés du sous-composant, comme indiqué ci-dessous :

<!-- Parent Component -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

export default{
  components: {
    ChildComponent,
  },
  data(){
    return {
      message: 'Hello World!',
    }
  }
}
</script>

<!-- Child Component -->
<template>
  <div>{{message}}</div>
</template>

<script>
export default{
  props: {
    message: {
      type: String,
      required: true,
    }
  },
  data(){
    return {
      name: 'Alice',
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons des accessoires pour définir la propriété "message" du sous-composant. Lorsque le composant parent transmet cette propriété, il doit s'assurer que la propriété a. été défini, sinon une TypeError se produira : impossible de lire la propriété 'xxx' d'une erreur nulle.

Résumé :

Dans les applications Vue, nous utilisons des variables, des propriétés et des méthodes pour traiter les données et la logique métier. Lors de l'écriture du code, vous devez faire attention à savoir si ces variables, propriétés ou méthodes ont été définies lors de leur accès et si elles sont correctement orthographiées. Lorsque nous utilisons le chargement asynchrone de données ou l'imbrication de composants, nous devons nous assurer que les données sont chargées avant de restituer les données, et lors du passage d'une propriété, nous devons nous assurer que le composant enfant a défini la propriété. Si nous rencontrons toujours l'erreur TypeError: Cannot read property 'xxx' of null, nous pouvons utiliser la console du navigateur pour déboguer, trouver la source de l'erreur, puis la gérer selon les solutions ci-dessus.

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!