Rumah > hujung hadapan web > View.js > teks badan

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

王林
Lepaskan: 2023-08-18 23:16:50
asal
1250 orang telah melayarinya

在Vue应用中使用axios时出现“TypeError: Cannot set property 'xxx' of null”怎么办?

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)
            })
    }
}
Salin selepas log masuk

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()
    }
}
Salin selepas log masuk

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()
    }
}
Salin selepas log masuk

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)
            })
    }
}
Salin selepas log masuk

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)
            })
    }
}
Salin selepas log masuk

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)
        }
    }
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan