如何在Angular 12中使用sort()排序？遇到sort相关undefined报错如何解决

这个TypeError: Cannot read properties of undefined (reading 'sort')报错的核心逻辑是：你调用sort方法的目标变量是undefined，而sort是数组原型上的方法，只能被数组类型的值调用。虽然你已经完成接口调用且可正常展示数据，该报错90%以上是异步时序或变量取值错误导致，对应排查方案如下：

• 异步时序问题：你在API请求未返回结果时就提前触发了排序逻辑，此时存储数据的变量还没被赋值为接口返回的数组。比如React/Vue中你给数据的初始值设为了null/未赋值，组件首次渲染执行排序逻辑时就会触发报错。
• 字段取值错误：你调用sort方法的变量不是你要排序的数组，比如接口返回结构为{ code: 200, data: { goodsList: [...] } }，你误写为res.data.sort()，此时res.data是对象不是数组，或者字段名拼写错误，取到的就是undefined。

修复方案 #

1. 给排序逻辑加类型兜底，执行排序前先判断目标值是否为数组：

// 示例：yourList为你要排序的目标变量，localeCompare为按字母排序的方法
const sortedResult = Array.isArray(yourList) ? yourList.sort((a,b) => a.name.localeCompare(b.name)) : []

2. 检查数据初始值，比如状态初始化时统一赋值为空数组[]，不要留空或设为null。
3. 将排序逻辑移到API请求的成功回调中执行，保证只有接口返回数据后才会触发排序操作。

报错截图参考：

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