更新页面无法回显

需求与问题:

在菜品管理开发中,我需要修改菜品,第一步是回显页面,但在我再三确认代码无误的情况下依旧无法回显内容

问题发现与解决:

经过排查,我发现我的DishDTO内容如下:

java 复制代码
@Data
public class DishDTO extends Dish {
    private List<DishFlavor> dishFlavors=new ArrayList<>();

    private String categoryName;
}

传输内容如下:

前端接收如下:

javascript 复制代码
                this.dishFlavors = res.data.flavors&& res.data.flavors.map(obj => ({ ...obj, value: JSON.parse(obj.value),showOption: false }))

通过对比,我们可以发现是前端接收后端传递过来的数据的时候用的名字不对,res.data传递过来的数据只有dishFlavors而没有flavors,所以口味列表无法接收,导致整个页面无法回显

问题解决

将前端的flavors改为dishFlavors,保持和后端传递过来的数据名严格一致即可解决!

javascript 复制代码
                this.dishFlavors = res.data.dishFlavors && res.data.dishFlavors.map(obj => ({ ...obj, value: JSON.parse(obj.value),showOption: false }))

大家在开发中一定要记住前后端交互变量名保持一致呀,不然就会像我一样找好几个小时的bug

o(╥﹏╥)o

相关推荐
nightunderblackcat6 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
江号软件分享10 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
Bug退退退12311 分钟前
RabbitMQ 高级特性之延迟队列
java·spring·rabbitmq·java-rabbitmq
先睡15 分钟前
RabbitMQ
java
笑衬人心。16 分钟前
Java 17 新特性笔记
java·开发语言·笔记
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
麦兜*1 小时前
Spring Boot 企业级动态权限全栈深度解决方案,设计思路,代码分析
java·spring boot·后端·spring·spring cloud·性能优化·springcloud
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器