如何使用ES6对数组中的深层嵌套对象按expense字段排序

• 问题根源：你当前代码是先把item.data映射为React元素数组，再对元素数组执行排序。此时sort回调里的a、b是React元素对象，不存在expense属性，所以排序逻辑完全无效。

• 正确流程：先对原始数据数组排序，再映射成React元素，这样排序时操作的是原数据对象，能正常访问expense字段。

• 字符串排序优化：按A-Z排序字符串，建议使用String.prototype.localeCompare()，它比直接用>/<比较更可靠，能处理大小写、多语言字符等场景。

修改后的代码示例：

{arr.map((item) => {
  // 先对item.data按expense字段A-Z排序（不修改原数组的写法）
  const sortedData = [...item.data].sort((a, b) => a.expense.localeCompare(b.expense));
  // 再渲染排序后的数组
  return sortedData.map((d) => (
    <div key={`${d.date}-${d.expense}`}> {/* 必须添加唯一key属性 */}
      <div>{d.expense}</div>
      <div>{d.date}</div>
    </div>
  ));
})}

如果需要Z-A倒序排序，只需调换localeCompare的参数顺序：

const sortedData = [...item.data].sort((a, b) => b.expense.localeCompare(a.expense));

注意点：sort方法会原地修改原数组，如果不想改变原始数据，一定要像上面那样用扩展运算符[...item.data]复制一份新数组再排序。

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