Antd UI Switch组件 checked和defaultChecked踩坑记录
目录
需求分析
需求其实很简单,就是在对应的表格行内添加一个人switch 滑块,用于开启或关闭单点登录入口。只需要修改一下对应的表格,添加一个滑块组件,新增一个接口。于是菜鸡博主,啪的一下很快啊,就给代码写完交上去了。
结果脸打的不要太快...
问题发现
接口能用,也能走。能拿到数据,也能渲染出来。
整个页面结构大概长这样。 非常简单的一个人表格,加几个弹框。
直接看接口,页面一进来就获取表格数据,然后将对应的数据渲染出来,users后缀就是获取表格数据的接口。然后我点击switch滑块触发事件,调yumc_app的接口。请求成功以后重新获取表格数据。重新渲染页面,但是诡异的事情发生了,明明oss_app_status的值为true但页面上的滑块并没有变成true的状态。只有在切换路由的时候才会重新渲染。而且还导致了其他的一些问题。于是就成功的寄了。
解决方法
找了一圈发现问题出在了antd的属性的使用上。
我们先来看这两个属性。
很好理解,一个是指定当前状态,一个是指定初始状态。再明白一点就是,
checked 是当前状态,可以根据返回的信息值进行实时更新。
defaultChecked 是初始状态,只会在页面数据第一次被渲染时渲染上。后面就不会再受控制了。
在使用defaultChecked的时候操作错误数据是这样的。
虽然接口报错了,但页面上的状态仍然被修改了,而且请求回来的新数据并没有渲染上去。
现在我们换到checked可以看到,如果数据错误,页面上渲染的状态并没有改变。
页面上渲染的数据也与返回的数据一致。
到此为止问题就已经解决了。
总结
问题很简单,解决也很简单,但透露出的问题不简单。不够细心,这样低级的错误也能犯,完全可以避免的错误,说明自己对于antd的基本使用都不够了解。仍需努力啊。
元旦快到了,祝看到这篇文章的兄弟姐妹们节日快乐,新年暴富!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhicikcc
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22