Antd组件使用问题、原因分析及解决办法汇总（一）

目录

1、Select选择器的placeholder属性无效

2、TextArea组件在设置defaultValue属性后在渲染时出现旧数据的问题

---

antd是蚂蚁金服出的一套前端组件，风格偏简约，视觉效果还不错。本文简要总结了我在近期使用过程中遇到的比较棘手的问题，对其进行了相应的原因分析并给出了亲测有效的解决办法（本文使用的前端框架是dva）。

1、Select选择器的placeholder属性无效

【现象描述】代码里明明已经添加了placeholder属性值，但总是无效的，即渲染出来并没有显示设定值，如下图。

【原因分析】仔细查看选择器，当鼠标悬浮到选择器上时，发现是可以清除的（如下图）；这说明选择器默认是有值的。

【解决办法】从原因出发就比较容易了，将选择器的值清除后预先设定的placeholder属性便显示出来了。经过测试，选择器的值为null或空字符串时（主要是这两种情况不易被发现）是无法展示placeholder属性的；不过undefined并不会产生异常影响。

2、TextArea组件在设置defaultValue属性后在渲染时出现旧数据的问题

【现象描述】我的分页数据列表中，每一行加了悬浮框，悬浮框主要是由TextArea构成的。在对列表数据进行分页的时候，惊奇的发现后一页渲染出来的内容是前一页的数据；下图中上面是第1页的悬浮窗，下面是第2页的悬浮框；第2页的悬浮框渲染出来的居然是第1页的内容，而且，在第1页中渲染过哪些悬浮框，第2页相应行的悬浮框就会出现旧数据（当然，并不严格区分页数大小，哪页先渲染）。

PS：直接将数据放在起止标签中间的文本内容上也存在这个问题

（首次渲染的悬浮框）

（下一页同样位置的悬浮框内容）

【原因分析】暂时不详。个人推测：从代码上及跟踪调试过程可以确定本例中的悬浮框在每个新页中都是重新渲染出来的，再加上按照传统的将数据内容写在TextArea的起止标签中间也存在这个问题，因此antd或dva在渲染元素时可能写有缓存，且defaultValue属性无法清除该缓存

【解决办法】使用value属性即可

【待续...】