调用GitHub API展示仓库时A-Z字母排序按钮无响应问题排查

• 事件绑定失效
  首先排查按钮点击事件有没有正确挂载：如果是原生JS实现，检查元素选择器是否拼写错误、绑定逻辑是否在DOM渲染完成前执行（比如脚本放在DOM节点前又没加DOMContentLoaded监听）；如果是前端框架实现，检查事件名、绑定的方法名是否和定义的一致，有没有出现方法未挂载到组件实例的问题。
  排查时可以打开浏览器开发者工具，选中对应按钮查看「事件监听」面板，确认点击回调存在；点击按钮时同步查看控制台报错，如果出现xxx is not a function类报错，直接对应到方法作用域、方法名错误的问题。另外还要确认按钮没有被高z-index的透明遮罩层遮挡，导致点击事件根本没触发到按钮上。

• 排序逻辑未正常执行
  检查点击回调内是否真的写入了排序逻辑，有没有因为判断条件写反（比如判断列表非空才执行排序，结果条件写成了列表为空才进入逻辑）导致提前return，根本没走到排序步骤。
  如果走的是前端本地排序：确认比较函数写法正确，标准的名称A-Z排序应该用repos.sort((a, b) => a.name.localeCompare(b.name))，不要漏传比较函数、不要错取排序字段（比如把仓库名字段name写成title/repoName，导致取到undefined排序后无变化）。
  如果走的是接口排序：确认传给GitHub API的参数正确，按名称正序需要传sort=full_name、direction=asc，参数名或参数值拼写错误的话接口会返回默认排序的结果，看起来和没点按钮一样。

• 排序后未触发视图更新
  这是最高发的问题：如果只在内存里对仓库数组做了排序，没有触发视图重渲染，页面自然不会有变化。原生JS实现需要在排序完成后清空原有仓库列表DOM，重新遍历排序后的数组插入节点；React/Vue等响应式框架要注意，直接调用数组原生sort()方法修改原数组可能不会触发响应式更新，需要返回新的数组引用（比如React中写setRepos([...sortedRepos])）才能触发渲染。
  另外要排查和已有搜索功能的逻辑冲突：如果排序完成刚要渲染，搜索框的监听事件触发，拿未排序的原始仓库列表重新执行了一遍渲染，会直接把排序后的结果覆盖，表现就是点击按钮完全没反应，可以在两个逻辑的渲染入口加日志确认执行顺序。

内容的提问来源于stack exchange，提问作者dandankarai