Apakah yang perlu saya lakukan jika "TypeError: Cannot set property 'xxx' of null" muncul apabila menggunakan axios dalam aplikasi Vue?

Apakah yang perlu saya lakukan jika "TypeError: Cannot set property 'xxx' of null" muncul apabila menggunakan axios dalam aplikasi Vue?

Vue ialah rangka kerja bahagian hadapan yang sangat popular, dan axios ialah perpustakaan permintaan rangkaian bahagian hadapan yang sangat popular, oleh itu, apabila kami menggunakan aplikasi Vue, kami sering menggunakan axios untuk memulakan permintaan rangkaian. Walau bagaimanapun, kadangkala apabila menggunakan axios, mesej ralat yang serupa dengan "TypeError: Cannot set property 'xxx' of null" akan muncul. Seterusnya, kita akan meneroka isu ini bersama-sama.

Pertama sekali, kita perlu memahami asas penggunaan axios. Secara umumnya, apabila kami menggunakan axios dalam aplikasi Vue, kami akan menghantar permintaan rangkaian dalam kaedah tertentu, contohnya:

import axios from 'axios'

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

Dalam contoh ini, kami mula-mula mengimport pustaka axios, dan kemudian menggunakan axios untuk menghantar permintaan get dalam kaedah fetchData , dan kemas kini data yang dikembalikan kepada atribut data komponen Vue selepas permintaan berjaya. Ini nampaknya merupakan contoh yang sangat mudah, tetapi dalam penggunaan sebenar, dalam beberapa kes, mesej ralat seperti "TypeError: Cannot set property 'xxx' of null" akan muncul.

Mesej ralat ini bermakna kami tidak boleh menetapkan sifat pada null atau undefined. Dalam kes kami, kemungkinan besar apabila cuba mengemas kini data yang dikembalikan (res.data) kepada this.data, nilai this.data adalah batal atau tidak ditentukan, jadi ralat akan dilaporkan. Jadi, mengapa ini.data batal atau tidak ditentukan?

Ada kemungkinan this.data tidak mempunyai set nilai lalai apabila komponen dibuat, contohnya:

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

Dalam contoh ini, kami meninggalkan nilai lalai atribut data, jadi jika axios meminta dalam fetchData kaedah gagal, this.data will Is null or undefined. Dalam kes ini, kita harus menetapkan nilai lalai atribut data dalam komponen Vue, contohnya:

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

Kemungkinan lain ialah kami tidak mengendalikan data yang dikembalikan dengan betul selepas permintaan axios berjaya. Sebagai contoh, dalam kaedah fetchData, kami mungkin menghadapi situasi seperti ini:

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

Dalam contoh ini, kami cuba menetapkan data yang dikembalikan (res.data.info) kepada this.data.info selepas permintaan berjaya , tetapi jika this.data tidak wujud sama sekali, berbuat demikian akan mengakibatkan mesej ralat seperti "Tidak boleh menetapkan 'info' harta yang tidak ditentukan". Oleh itu, apabila menggunakan axios, kita harus terlebih dahulu menentukan sama ada data itu wujud, contohnya:

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

Dengan cara ini, kita boleh mengelakkan mesej ralat seperti "Tidak boleh menetapkan sifat 'xxx' null".

Apabila menggunakan axios, kita perlu memberi perhatian kepada dua situasi di atas untuk mengelakkan gesaan ralat kerana nilai lalai tidak ditetapkan atau data yang dikembalikan tidak diproses dengan betul. Pada masa yang sama, kami juga boleh menggunakan pernyataan cuba-tangkap untuk menangkap ralat dan memprosesnya, contohnya:

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

Dalam contoh ini, kami menggunakan kenyataan async/tunggu dan cuba-tangkap supaya kami dapat mengesan ralat dengan lebih tepat apabila ralat berlaku untuk pemprosesan.

Ringkasan

Apabila menggunakan axios dalam aplikasi Vue, kami sering menghadapi mesej ralat seperti "TypeError: Tidak boleh menetapkan sifat 'xxx' nol Ini kerana kami tidak menetapkan nilai lalai data dengan betul atau salah data yang dikembalikan. Untuk mengelakkan ralat ini, kami harus sentiasa menetapkan nilai lalai data dalam komponen Vue dan mengendalikan data yang dikembalikan dengan betul Kami juga boleh menggunakan kenyataan cuba-tangkap untuk menangkap ralat dan memprosesnya.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika "TypeError: Cannot set property 'xxx' of null" muncul apabila menggunakan axios dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!