Antd UI Switch组件 checked和defaultChecked踩坑记录

目录

需求分析

问题发现

解决方法

总结 

需求分析

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

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

问题发现

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

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

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

解决方法

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

        我们先来看这两个属性。

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

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

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

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

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

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

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

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

总结 

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

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

这篇好文章是转载于：学新通技术网