React新增编辑复用封装模态框数据污染复现问题

在使用React开发项目时,为追求代码简洁性,将模态框封装成组件复用,但在新增与编辑功能中遇到数据污染问题。表现为新增时表单带有旧数据,编辑时不显示数据。解决方案包括:在表单中设置控制值,父子组件间明确数据类型传递,以及在父组件中定义处理方法。虽然不同开发者有不同的实现方式,但上述解决方案具有通用性。
摘要由CSDN通过智能技术生成

问题出现描述

在做项目开发的时候,因为新增与编辑功能打开是同一个模态框,考虑到可复用,所以为了代码简洁性,在用的时候就将模态框单独封装成一个组件,在父组件里面调用子组件,但是出现了新增编辑时表单数据会污染复现,即出现新增时表单带数据,编辑时表单不带数据显示问题。

问题显示情况

1.先点编辑再点新增出现的状况。

在这里插入图片描述
在这里插入图片描述
2.先点新增再点编辑的状况
在这里插入图片描述
在这里插入图片描述

问题解决说明

1.给表单设置一个值用来控制新增编辑时数据更新问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值