TypeError: Cannot set properties of undefined (setting ‘xx‘)的問題及解決方法

更新時(shí)間：2023年09月13日 09:42:29 作者：FBI HackerHarry浩

這篇文章主要介紹了TypeError: Cannot set properties of undefined (setting ‘xx‘)的問題,本文給大家分享完美解決方案,需要的朋友可以參考下

TypeError: Cannot set properties of undefined (setting ‘xx‘)

問題描述

我在編寫axios請(qǐng)求后端數(shù)據(jù)的時(shí)候，一直出現(xiàn)下面的錯(cuò)誤前端頁面顯示不出來。

報(bào)錯(cuò)：

TypeError: Cannot set properties of undefined (setting ‘xx’)

原因分析：

this指向的對(duì)象發(fā)生了變化（現(xiàn)在this代表axios對(duì)象），需要在函數(shù)前將this指向的對(duì)象提前保存一下

解決方案：

方法一：回調(diào)函數(shù)使用箭頭函數(shù)來使用。(responde)=>{}

<template>
    <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="name" label="姓名"  width="250" />
        <el-table-column prop="age" label="年齡" width="250" />
        <el-table-column prop="gender" label="性別" width="250" />
        <el-table-column prop="createTime" label="創(chuàng)建時(shí)間" width="250" />
        <el-table-column fixed="right" label="操作" width="250">
            <template #default>
                <el-button link type="primary" size="small">編輯</el-button>
                <el-button link type="primary" size="small">刪除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                tableData:[]
            }
        },
        created(){//為何 要在created 方法中 發(fā)請(qǐng)求，因?yàn)樵摲椒?可以操作tableData屬性
            // 解決方法一
            axios.get('http://localhost:9090/student') // url 請(qǐng)求后臺(tái)的地址
                /*
                * .then(function (response) 這樣寫前端會(huì)報(bào)錯(cuò)
                * 報(bào)錯(cuò)信息：TypeError: Cannot set properties of undefined (setting 'tableData')at eval (Student.vue?401d:59:1)
                * 這樣寫是匿名函數(shù)，無法取到tableData的值，所以tableData的值為undefined，不能給undefined的變量賦值
                * 解決辦法：1.改為箭頭函數(shù) 2.將this重新賦值給新的變量
                */
                // .then(function (response) { //成功回調(diào)方法（訪問后臺(tái)成功，后臺(tái)有數(shù)據(jù)返回，則進(jìn)入該方法）
                .then(response=> { //成功回調(diào)方法（訪問后臺(tái)成功，后臺(tái)有數(shù)據(jù)返回，則進(jìn)入該方法）
                    console.log(response);
                    console.log(response.data)
                    this.tableData = response.data;
                })
                .catch(function (error) {//失敗回調(diào)方法（訪問后臺(tái)失敗，返回失敗的信息，則進(jìn)入該方法）
                    console.log(error);
                });
        },
        methods:{
        }
    }
</script>

方法二：暫存this。var th = this; 在內(nèi)部用th.xx代替this.xx

   //解決辦法二
        var th = this;
        axios.get('http://localhost:9090/student') // url 請(qǐng)求后臺(tái)的地址
            .then(function (response) { //成功回調(diào)方法（訪問后臺(tái)成功，后臺(tái)有數(shù)據(jù)返回，則進(jìn)入該方法）
                console.log(response);
                console.log(response.data)
                th.tableData = response.data;
            })
            .catch(function (error) {//失敗回調(diào)方法（訪問后臺(tái)失敗，返回失敗的信息，則進(jìn)入該方法）
                console.log(error);
            });

到此這篇關(guān)于TypeError: Cannot set properties of undefined (setting ‘xx‘)的文章就介紹到這了,更多相關(guān)Cannot set properties of undefined內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: