记一次select的bug

情况一：select框中由1000行数据，会导致很卡的情况。经过讨论后，决定第一次只显示100条数据，但是搜索的时候，可以搜索所有，但是只显示50条过滤数据。

  解决antd的select下拉框因为数据量太大造成卡顿的问题_liuyuhua666的博客-CSDN博客_antd select 卡

采用上面的博主推荐，能够解决问题。但是有一个新的问题就是

如果超出初始100以外的数据，那么只能显示id。但是100以内的，确实正常。

后来经过排查，发现是select的value的属性 赋值的是id，而不是name。如果id这个值在100以内，因为会与初始的100个数据匹配，不会暴露问题。但是100以后，匹配不上，问题暴露。以前没有重视value这个属性的重要性，现在get到了

我的错误:

我开始以为是componentWillReceiveProps 这个生命周期 在每次点击select后重新渲染界面。然后之前setState的 过滤后的50个数据失效 变成初始的100个数据 匹配不上 导致的问题 花了很多时间研究。

点击select 切换值后会重新渲染界面 state里面的数据也确实会失效 也确实会匹配不上 但是这不是解决办法的最主要的原因

情况二：

同事问我为什么他写的弹窗没有反应，但是弹窗的并没有问题。排查后发现是select的问题

报错：Uncaught Error:Need at least a key or a value or a label(only for OptGroup)

至少需要一个key或者value或者一个label

后来发现是原代码的option的key使用的是value

 改成唯一值code，正常  或者删掉filterOption也正常

排查接口返回数据后发现 有某些数据的value为空，最终key取值采用code。

总结：由于最近的任务是改古早代码的bug，有些代码写有些疏忽或者测试不仔细没测出来，也因为代码复杂，所以改bug的速度较慢。改了几个bug，几乎花了一天的时间，心中也很愧疚。所以，改bug一定要看看console报错的地方，不要一上来就根据自己的习惯瞎改。最后改了一通也一事无成。结果发现改的地方很小，却影响全局有很后悔，所以一定要看清除报错的地方以及原因，仔细分析。