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

问题描述

我在编写axios请求后端数据的时候，一直出现下面的错误前端页面显示不出来。

报错：

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

原因分析：

this指向的对象发生了变化（现在this代表axios对象），需要在函数前将this指向的对象提前保存一下

解决方案：

方法一：回调函数使用箭头函数来使用。(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="创建时间" 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 方法中 发请求，因为该方法 可以操作tableData属性// 解决方法一axios.get('http://localhost:9090/student') // url 请求后台的地址/** .then(function (response) 这样写前端会报错* 报错信息：TypeError: Cannot set properties of undefined (setting 'tableData')at eval (Student.vue?401d:59:1)* 这样写是匿名函数，无法取到tableData的值，所以tableData的值为undefined，不能给undefined的变量赋值* 解决办法：1.改为箭头函数 2.将this重新赋值给新的变量*/// .then(function (response) { //成功回调方法（访问后台成功，后台有数据返回，则进入该方法）.then(response=> { //成功回调方法（访问后台成功，后台有数据返回，则进入该方法）console.log(response);console.log(response.data)this.tableData = response.data;}).catch(function (error) {//失败回调方法（访问后台失败，返回失败的信息，则进入该方法）console.log(error);});},methods:{}}</script>

方法二：暂存this。var th = this; 在内部用th.xx代替this.xx

   //解决办法二var th = this;axios.get('http://localhost:9090/student') // url 请求后台的地址.then(function (response) { //成功回调方法（访问后台成功，后台有数据返回，则进入该方法）console.log(response);console.log(response.data)th.tableData = response.data;}).catch(function (error) {//失败回调方法（访问后台失败，返回失败的信息，则进入该方法）console.log(error);});

TypeError: Cannot set properties of undefined (setting ‘xx‘)相关推荐

TypeError: Cannot set properties of undefined (setting ‘innerHTML‘)
Vue调用本地组件定义的变量,报错TypeError: Cannot set properties of undefined (setting 'innerHTML'),可能是回调函数内无法直接访问本 ...
js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)
jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting 'className') 我想要 ...
Vue TypeError: Cannot set properties of undefined (setting ‘msg‘) at eval (App.vue?91a0:25:1)
Vue TypeError: Cannot set properties of undefined (setting 'msg') at eval (App.vue?91a0:25:1) 这个问题是是 ...
【vue】文件批量上传报错问题解决Uncaught TypeError: Cannot set properties of undefined (setting ‘status‘)
一.问题描述最近在vue项目上,使用el-upload组件实现多文件上传功能时出现了如下的报错内容. Uncaught TypeError: Cannot set properties of und ...
Uncaught TypeError: Cannot set properties of undefined (setting ‘ innerHTML ) 问题
项目考核已经结束,我想分享一下我这次写项目的收获. 首先是"> Uncaught TypeError: Cannot set properties of undefined (sett ...
Error in nextTick: “TypeError: Cannot set properties of undefined (setting ‘checked‘)“
当看到nextTick的时候各位有没有想到$nextTick呢这个报错正是需要通过使用$nextTick来解决 Vue 在更新 DOM 时是异步执行的.只要侦听到数据变化,Vue 将开启一个队列,并 ...
Unhandled Rejection (TypeError): Cannot set properties of undefined (setting ‘xxx‘)报错问题
在react编码时,定义的方法多次调用时,出现以下this指向不存在报错问题报错写法解决方法,改成箭头函数写法
Uncaught TypeError: Cannot set properties of undefined (setting ‘backgroundColor‘)的解决方法
前言首先看代码: let colors = ['green', 'yellow', 'black', 'blue', 'pink', 'yellowgreen']let random = Math. ...
报错，Uncaught TypeError: Cannot read properties of undefined (reading ‘inputValue‘) at ＜anonymous＞
错误: Uncaught TypeError: Cannot read properties of undefined (reading 'inputValue') at <anonym ...

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

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

目录

问题描述

原因分析：

解决方案：

方法一：回调函数使用箭头函数来使用。(responde)=>{}

方法二：暂存this。var th = this; 在内部用th.xx代替this.xx

TypeError: Cannot set properties of undefined (setting ‘xx‘)相关推荐

最新文章

热门文章