更新页面无法回显

需求与问题:

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

问题发现与解决:

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

相关推荐
墨渊君33 分钟前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
isysc11 小时前
面了一个校招生,竟然说我是老古董
java·后端·面试
huabuyu1 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z1 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行1 小时前
Android 15边到边模式
前端
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾1 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工1 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
xw52 小时前
uni-app中v-if使用”异常”
前端·uni-app