网站建设流程资讯,做基础工程分包应上什么网站,推广营销app,公司如何注册新公司面试官#xff1a;请你讲讲你在该项目中遇到的印象深刻的问题是什么#xff1f;
答#xff1a;我的回答#xff1a;该项目的实现过程中我确实遇到了问题#xff1a;【我会给大家整理回答思路和角度#xff0c;那那么遇到这样的问题也可借鉴这种思路进行阐述】
第一层面…面试官请你讲讲你在该项目中遇到的印象深刻的问题是什么
答我的回答该项目的实现过程中我确实遇到了问题【我会给大家整理回答思路和角度那那么遇到这样的问题也可借鉴这种思路进行阐述】
第一层面分析页面【原型图如下】 1发现问题
用户在下拉选择的搜索框搜索值David时整个页面卡死了不能选到用户需要的值如下图所示 此时打开控制台出现了一个报错信息大概意思就是id为6的value值已经被id为5的value值使用了。
2分析问题【这个才是项目重难点】
首先找到返回数据的接口URL并打开网络请求根据URL找到该接口并去预览里复制数据后粘贴到记事本里 然后直接使用查找功能分别找到id为5和id为6的value值确实都是David数据结构如下图所示 最后定位到了原因浏览器在渲染页面展示数据时根据用户输入值肯定匹配到两个value值不知道哪一个要渲染出来所以导致用户在搜索David该值时不知道该匹配id为5的value值还是匹配id为6的value值就出现了搜索下拉框页面卡死问题。
3解决问题
首先既然定位到数据出了问题不是前端导致的问题那肯定要找上级领导反馈问题让数据处理这个问题一个value不能有重复出现的情况。
其次与产品协商后数据不能保证完全没问题所以前端要能保证用户输入value值时无论选项是否有重复都得将所有匹配到的选项筛选出来不能出现用户选不了和页面卡死的问题效果如下图所示 第二层面分析代码
4实现思路
当用户输入值时只要与options中匹配到的value值都要显示出来。
5代码实现实现过程
