前后端交互-数据类型不匹配（TypeError: data.reduce is not a function）

专注学习java

已于 2022-03-19 08:20:44 修改

阅读量1.1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端文章标签： java vue json

于 2020-12-30 21:57:14 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45969142/article/details/111998706

前端专栏收录该内容

16 篇文章

订阅专栏

本文讲述了前端遇到TypeError：data.reduce is not a function的问题，原因在于后端返回的对象数据与前端期望的数组类型不符。解决办法是将后端数据转换为数组，确保前后端数据一致。作者提供了将UserVo对象转为数组的方法，并探讨了可能的前端调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误1：TypeError: data.reduce is not a function

错误2：TypeError: Cannot read property ‘firstName’ of undefined）**

错误原因：

response.data数据打印出来了，但是赋值的前面that.tableData却没有数据在前台打印出来。

看后台数据，返回的是一个对象数据类型

在这里插入图片描述

观看前端可知，接受的数据是一个数组类型，所以两者类型不一致。

在这里插入图片描述

解决方法

因为后端返回的是一个对象：UserVo对象
在这里插入图片描述
所以，将后台的数据的返回类型改成了数组的形式就好了，这样前后端数据就一致了。

最后看一下返回的数组类型的数据

或者更改前端也可以

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。