更新页面无法回显

需求与问题:

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

问题发现与解决:

经过排查,我发现我的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

相关推荐
苹果醋31 分钟前
数据库索引设计:在 MongoDB 中创建高效索引的策略
java·运维·spring boot·mysql·nginx
艾小码10 分钟前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
Dontla11 分钟前
Dockerfile解析器指令(Parser Directive)指定语法版本,如:# syntax=docker/dockerfile:1
java·docker·eureka
彭于晏Yan14 分钟前
SpringBoot优化树形结构数据查询
java·spring boot·后端
幸福摩天轮19 分钟前
npm发布包
前端
前端AK君21 分钟前
Gitlab 线上合并冲突的坑
前端
ze_juejin21 分钟前
ES6 Module 深入学习
前端
章丸丸24 分钟前
Tube - Studio Videos
前端·后端
AAA修煤气灶刘哥30 分钟前
缓存这「加速神器」从入门到填坑,看完再也不被产品怼慢
java·redis·spring cloud
练习时长一年36 分钟前
Spring事件监听机制(三)
java·后端·spring