React中如何对.map遍历的数字类型items进行升序排序？

现有定义代码：

const fields = [
    { key: FORM, field: GSN, items: forms, label: 'FORM' },
    { key: STRENGTH, field: GSN, items: strengths, label: 'DOSAGE' },
    { key: QUANTITY, field: QTY, items: quantities, label: 'QUANTITY' }
]

渲染调用代码：

{fields.map(({ field, key, items }) => {
    const v = inputs[key]
    const item = items.find(i => i[field] === v || i[key] === v)
    return item ? (
        <div key={key}>
            {item[key]}
        </div>
    ) : null
})}

items均为数字类型，尝试添加sort()时总是报错，求实现数字从低到高排序的最佳实践。

解决方案 #

核心问题 #

JavaScript的Array.sort()默认按字符串Unicode码点排序，直接用在数字数组上会得到错误结果；另外如果直接修改原items数组可能引发副作用，若items不是数组（比如null/undefined）也会触发报错。

正确排序方式 #

要实现数字升序，必须做两件事：

1. 先复制原数组再排序，避免修改原始数据
2. 传入数字专用的比较函数(a, b) => a - b

方案1：静态数据预排序

如果forms/strengths/quantities是静态数据，可以在定义fields时提前完成排序：

const fields = [
    { 
        key: FORM, 
        field: GSN, 
        items: [...forms].sort((a, b) => a - b), 
        label: 'FORM' 
    },
    { 
        key: STRENGTH, 
        field: GSN, 
        items: [...strengths].sort((a, b) => a - b), 
        label: 'DOSAGE' 
    },
    { 
        key: QUANTITY, 
        field: QTY, 
        items: [...quantities].sort((a, b) => a - b), 
        label: 'QUANTITY' 
    }
]

方案2：动态数据渲染时排序

如果items是动态获取的，在渲染逻辑里处理，同时加类型判断避免非数组报错：

{fields.map(({ field, key, items }) => {
    // 先判断是否为数组，防止调用sort时报错
    const sortedItems = Array.isArray(items) 
        ? [...items].sort((a, b) => a - b) 
        : [];
    const v = inputs[key]
    const item = sortedItems.find(i => i[field] === v || i[key] === v)
    return item ? (
        <div key={key}>
            {item[key]}
        </div>
    ) : null
})}

常见报错排查 #

• 若报错sort is not a function：检查items是否确实为数组，可能是null/undefined或其他类型，加Array.isArray判断即可规避
• 若排序结果不符合预期：没传数字比较函数，导致按字符串规则排序（比如10会排在2前面）

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