更改手机号自动完成输入框的校验

前端技术栈：reactjs + antd + typescript

问题

自动完成输入框在直接复制过来后，出现下拉选项，选择后还是报出“请输入正确的手机号”（需要输入的手机号必须是存在在后端传来的数据库中的）。
猜想1：
state导致数据的更新延迟。
做法1：
把自动输入框的source设置从state中变成class的私有变量。
结果1：
问题还是没有得到解决（此时忽略了这样做，导致出现的新的问题）。
猜想2:
既然是出现下拉菜单后，没有校验对，那么校验就应该出现在请求全部数据的resolve中。
做法2:
把antd中的数据校验部分放到resolve中。
结果2:
这个antd数据校验固定的函数返回的结果不符合要求。

实在想不出原因，第二天就只能重头分析：

明确自己的需求

更改手机号

1. 原手机号必须出现在后端返回的数据库中。
2. 原手机号和新手机号不能一样。

此处需要copy后，下拉菜单出现相应的内容，能直接点击，并能出现对号，说明输入的手机号确实在数据库中。

问题3：
这个根据输入去搜索匹配的手机号的函数和自动校验输入内容的函数，哪个先发生？
做法3：
打断点，分析函数过程。
结果3：
根据输入去搜索匹配的手机号的函数先触发，然后根据输入去校验输入的内容。发现在选择弹出的匹配的手机号后，自动校验函数并没有触发。

问题4：
此处如果在选择弹出的匹配的手机号后，触发自动校验的话，那么结果就对了。那么怎么才能触发自动校验函数呢?
做法4：
根据这个问题去看自己的代码和以前工程实现相同的功能的部分代码写的如何不一样。
结果4：
然后发现自己对搜索内容返回的结果的封装是不一样的。

做法5:
用相同的方法封装搜索返回的结果，只是value和text是一样的。
结果5：
还是没有起到作用。
做法6：
把value和text的封装成不一样的。
结果6:
终于触发了自动校验函数。

结论：只有点击弹出框输入的内容和原来的输入不一样，才能触发自动校验函数。

问题7：
那么把state里的source数据变成private的话，能实现相同的功能吗？
结果：
试了一下，结果没有弹出框。

结论：1. 跟前端界面相关的改变应该放到state中，这样state发生改变的话，界面才能相应的发生响应式改变。2. 传入框架插件里的数据只是说明数据，跟界面的渲染没有什么关系，只是保证数据正确。

反思：

出现问题后，没有分析问题就直接修改。
应该，遇到问题后，心中应该再次确定自己的功能需求，然后查看自己的实现的效果和需求如何的不一样。然后针对现状，先分析哪个和自己的想法中的不一样，然后针对发现的问题再去找答案。

说明在做一件事时，都需要自己先明确自己的目标，然后分析自己的现状，再去做事。

杜绝无目标和意义的焦急和忙碌。

转载于:https://juejin.im/post/5a054e6ef265da43052e15e6