更新页面无法回显

需求与问题:

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

问题发现与解决:

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

相关推荐
少卿1 分钟前
React Native Vector Icons 安装指南
前端·react native
程序员小假3 分钟前
我们来说一说 Redisson 的原理
java·后端
chirrupy_hamal5 分钟前
网络编程 - TCP 篇
java
国家不保护废物6 分钟前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
notillusion27 分钟前
KWW#71843
java·php·程序优化
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
Deschen1 小时前
设计模式-抽象工厂模式
java·设计模式·抽象工厂模式
齐木卡卡西在敲代码1 小时前
java流式编程学习
java
ʚ希希ɞ ྀ1 小时前
SpringBoot的学习
java·spring boot·学习
notillusion1 小时前
TRX#22597
java·php·程序优化