Antd UI Switch组件 中 checked与defaultChecked踩坑记录

目录

需求分析

问题发现

解决方法

总结 


需求分析

        需求其实很简单,就是在对应的表格行内添加一个人switch 滑块,用于开启或关闭单点登录入口。只需要修改一下对应的表格,添加一个滑块组件,新增一个接口。于是菜鸡博主,啪的一下很快啊,就给代码写完交上去了。

        结果脸打的不要太快...

问题发现

        接口能用,也能走。能拿到数据,也能渲染出来。

        整个页面结构大概长这样。 非常简单的一个人表格,加几个弹框。      

        直接看接口,页面一进来就获取表格数据,然后将对应的数据渲染出来,users后缀就是获取表格数据的接口。然后我点击switch滑块触发事件,调yumc_app的接口。请求成功以后重新获取表格数据。重新渲染页面,但是诡异的事情发生了,明明oss_app_status的值为true但页面上的滑块并没有变成true的状态。只有在切换路由的时候才会重新渲染。而且还导致了其他的一些问题。于是就成功的寄了。

解决方法

        找了一圈发现问题出在了antd的属性的使用上。

        我们先来看这两个属性。

        很好理解,一个是指定当前状态,一个是指定初始状态。再明白一点就是,

        checked 是当前状态,可以根据返回的信息值进行实时更新。

        defaultChecked 是初始状态,只会在页面数据第一次被渲染时渲染上。后面就不会再受控制了。

        在使用defaultChecked的时候操作错误数据是这样的。

 虽然接口报错了,但页面上的状态仍然被修改了,而且请求回来的新数据并没有渲染上去。

 现在我们换到checked可以看到,如果数据错误,页面上渲染的状态并没有改变。

页面上渲染的数据也与返回的数据一致。

到此为止问题就已经解决了。

总结 

        问题很简单,解决也很简单,但透露出的问题不简单。不够细心,这样低级的错误也能犯,完全可以避免的错误,说明自己对于antd的基本使用都不够了解。仍需努力啊。

        元旦快到了,祝看到这篇文章的兄弟姐妹们节日快乐,新年暴富!

猜你喜欢

转载自blog.csdn.net/qq_45799465/article/details/128455978