Que dois-je faire si « TypeError : Cannot set property 'xxx' of null » apparaît lors de l'utilisation d'axios dans une application Vue ?

Que dois-je faire si « TypeError : Cannot set property 'xxx' of null » apparaît lors de l'utilisation d'axios dans une application Vue ?

Vue est un framework front-end très populaire, et axios est une bibliothèque de requêtes réseau frontale très populaire. Par conséquent, lorsque nous utilisons des applications Vue, nous utilisons souvent axios pour lancer des requêtes réseau. Cependant, parfois lors de l'utilisation d'axios, un message d'erreur similaire à « TypeError : Cannot set property 'xxx' of null » apparaîtra. Ensuite, nous explorerons cette question ensemble.

Tout d'abord, nous devons comprendre l'utilisation de base d'axios. De manière générale, lorsque nous utilisons axios dans une application Vue, nous enverrons une requête réseau selon une certaine méthode, par exemple :

import axios from 'axios'

...
methods: {
    fetchData() {
        axios.get('/api/data')
            .then(res => {
                this.data = res.data
            })
            .catch(err => {
                console.log(err)
            })
    }
}

Dans cet exemple, nous importons d'abord la bibliothèque axios, puis utilisons axios pour envoyer une requête get dans la méthode fetchData et mettez à jour les données renvoyées avec l'attribut data du composant Vue une fois la requête réussie. Cela semble être un exemple très simple, mais en utilisation réelle, dans certains cas, un message d'erreur tel que « TypeError : Cannot set property 'xxx' of null » apparaîtra.

Ce message d'erreur signifie que nous ne pouvons pas définir les propriétés sur null ou indéfinies. Dans notre cas, il est probable que lors de la tentative de mise à jour des données renvoyées (res.data) vers this.data, la valeur de this.data soit nulle ou indéfinie, donc une erreur sera signalée. Alors, pourquoi this.data est-il nul ou indéfini ?

Il est possible que this.data n'ait pas de valeur par défaut définie lors de la création du composant, par exemple :

export default {
    data() {
        return {
            // 这里没有为data设置默认值
        }
    },
    mounted() {
        this.fetchData()
    }
}

Dans cet exemple, nous omettons la valeur par défaut de l'attribut data, donc si la requête axios dans le fetchData La méthode échoue, this.data sera nul ou non défini. Dans ce cas, nous devrions définir la valeur par défaut de l'attribut data dans le composant Vue, par exemple :

export default {
    data() {
        return {
            data: null // 设置默认值
        }
    },
    mounted() {
        this.fetchData()
    }
}

Une autre possibilité est que nous n'ayons pas traité correctement les données renvoyées après la réussite de la requête axios. Par exemple, dans la méthode fetchData, nous pouvons rencontrer une telle situation :

methods: {
    fetchData() {
        axios.get('/api/data')
            .then(res => {
                this.data.info = res.data.info // 错误的处理方式
            })
            .catch(err => {
                console.log(err)
            })
    }
}

Dans cet exemple, nous essayons de définir les données renvoyées (res.data.info) sur this.data.info une fois la demande réussie, mais si this.data n'existe pas du tout, cela entraînera un message d'erreur tel que "Impossible de définir la propriété 'info' de undefined". Par conséquent, lors de l'utilisation d'axios, nous devons d'abord déterminer si les données existent, par exemple :

methods: {
    fetchData() {
        axios.get('/api/data')
            .then(res => {
                if (this.data) {
                    this.data.info = res.data.info // 正确的处理方式
                }
            })
            .catch(err => {
                console.log(err)
            })
    }
}

De cette façon, nous pouvons éviter les messages d'erreur tels que "Impossible de définir la propriété 'xxx' sur null".

Lors de l'utilisation d'axios, nous devons prêter attention aux deux situations ci-dessus pour éviter les invites d'erreur car la valeur par défaut n'est pas définie ou les données renvoyées ne sont pas traitées correctement. Dans le même temps, nous pouvons également utiliser les instructions try-catch pour capturer les erreurs et les traiter, par exemple :

methods: {
    async fetchData() {
        try {
            let res = await axios.get('/api/data')
            if (this.data) {
                this.data.info = res.data.info
            }
        } catch (err) {
            console.log(err)
        }
    }
}

Dans cet exemple, nous utilisons les instructions async/await et try-catch afin de pouvoir détecter plus précisément les erreurs lorsque des erreurs se produire pour le traitement.

Résumé

Lors de l'utilisation d'axios dans les applications Vue, nous rencontrons souvent des messages d'erreur tels que "TypeError : Impossible de définir la propriété 'xxx' de null". C'est parce que nous ne définissons pas correctement ou incorrectement la valeur par défaut des données. les données renvoyées. Afin d'éviter cette erreur, nous devons toujours définir la valeur par défaut des données dans le composant Vue et gérer correctement les données renvoyées. Nous pouvons également utiliser des instructions try-catch pour capturer les erreurs et les traiter.

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!