Was soll ich tun, wenn „TypeError: Cannot set property ‚xxx' of null' angezeigt wird, wenn Axios in einer Vue-Anwendung verwendet wird?

Was soll ich tun, wenn bei der Verwendung von Axios in einer Vue-Anwendung „TypeError: Cannot set property ‚xxx‘ of null“ angezeigt wird?

Vue ist ein sehr beliebtes Front-End-Framework und Axios ist eine sehr beliebte Front-End-Netzwerkanforderungsbibliothek. Wenn wir Vue-Anwendungen verwenden, verwenden wir daher häufig Axios, um Netzwerkanforderungen zu initiieren. Bei der Verwendung von axios erscheint jedoch manchmal eine Fehlermeldung ähnlich der „TypeError: Cannot set property ‚xxx‘ of null“ Was ist los? Als nächstes werden wir dieses Problem gemeinsam untersuchen.

Zunächst müssen wir die grundlegende Verwendung von Axios verstehen. Wenn wir Axios in einer Vue-Anwendung verwenden, senden wir im Allgemeinen eine Netzwerkanforderung auf eine bestimmte Weise, zum Beispiel:

import axios from 'axios'

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

In diesem Beispiel importieren wir zuerst die Axios-Bibliothek und verwenden dann Axios, um eine Get-Anfrage einzusenden die fetchData-Methode und aktualisieren Sie die zurückgegebenen Daten auf das Datenattribut der Vue-Komponente, nachdem die Anforderung erfolgreich war. Dies scheint ein sehr einfaches Beispiel zu sein, aber in der tatsächlichen Verwendung wird in einigen Fällen eine Fehlermeldung wie „TypeError: Eigenschaft ‚xxx‘ kann nicht auf null gesetzt werden“ angezeigt.

Diese Fehlermeldung bedeutet, dass wir Eigenschaften nicht auf null oder undefiniert setzen können. In unserem Fall ist es wahrscheinlich, dass beim Versuch, die zurückgegebenen Daten (res.data) auf this.data zu aktualisieren, der Wert von this.data null oder undefiniert ist, sodass ein Fehler gemeldet wird. Warum ist this.data null oder undefiniert?

Es ist möglich, dass für this.data beim Erstellen der Komponente kein Standardwert festgelegt ist, zum Beispiel:

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

In diesem Beispiel lassen wir den Standardwert des Datenattributs weg, also wenn die Axios-Anfrage in den fetchData Wenn die Methode fehlschlägt, ist this.data null oder undefiniert. In diesem Fall sollten wir den Standardwert des Datenattributs in der Vue-Komponente festlegen, zum Beispiel:

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

Eine andere Möglichkeit besteht darin, dass wir die zurückgegebenen Daten nach erfolgreicher Axios-Anfrage nicht korrekt verarbeitet haben. Bei der fetchData-Methode kann es beispielsweise zu einer Situation wie dieser kommen:

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

In diesem Beispiel versuchen wir, die zurückgegebenen Daten (res.data.info) auf this.data.info zu setzen, nachdem die Anfrage erfolgreich war, aber Wenn this.data überhaupt nicht existiert, führt dies zu einer Fehlermeldung wie „Eigenschaft ‚info‘ kann nicht auf undefiniert festgelegt werden“. Daher sollten wir bei der Verwendung von Axios zunächst feststellen, ob die Daten vorhanden sind, zum Beispiel:

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

Auf diese Weise können wir Fehlermeldungen wie „Eigenschaft ‚xxx‘ kann nicht auf null gesetzt werden“ vermeiden.

Bei der Verwendung von Axios müssen wir auf die beiden oben genannten Situationen achten, um Fehlermeldungen zu vermeiden, weil der Standardwert nicht festgelegt ist oder die zurückgegebenen Daten nicht korrekt verarbeitet werden. Gleichzeitig können wir auch Try-Catch-Anweisungen verwenden, um Fehler zu erfassen und zu verarbeiten, zum Beispiel:

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)
        }
    }
}

In diesem Beispiel verwenden wir async/await- und Try-Catch-Anweisungen, damit wir Fehler bei Fehlern genauer erkennen können zur Bearbeitung erfolgen.

Zusammenfassung

Bei der Verwendung von Axios in Vue-Anwendungen stoßen wir häufig auf Fehlermeldungen wie „TypeError: Eigenschaft ‚xxx‘ kann nicht auf Null gesetzt werden“. Dies liegt daran, dass wir den Standardwert der Daten nicht richtig oder falsch festlegen die zurückgegebenen Daten. Um diesen Fehler zu vermeiden, sollten wir immer den Standardwert der Daten in der Vue-Komponente festlegen und die zurückgegebenen Daten korrekt verarbeiten. Wir können auch Try-Catch-Anweisungen verwenden, um Fehler zu erfassen und zu verarbeiten.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn „TypeError: Cannot set property ‚xxx' of null' angezeigt wird, wenn Axios in einer Vue-Anwendung verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!