React开发：排序函数内无法访问组件Prop的问题

你的代码无法正常运行的核心问题有两个：

1. 用了错误的对象属性访问方式
2. 直接修改了原始数据数组

修正后的完整代码 #

const data = [
    { name: 'Jim', rank: 2 },
    { name: 'Ed', rank: 3 },
    { name: 'Jane', rank: 4 },
    { name: 'Lin', rank: 1 },
]

export function TableBody({ column }) {
    // 先创建原数组的副本，避免修改原始数据
    const sortedData = [...data].sort((a, b) => a[column] - b[column])
    const tableRows = sortedData.map(row => {
        return (
            <tr key={row.name}>
                <td>{row.name}</td>
                <td>{row.rank}</td>
            </tr>
        )
    })
    return <tbody>{tableRows}</tbody>
}

export default function Standings() {
    return (
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Rank</th>
                </tr>
            </thead>
            <TableBody column='rank' />
        </table>
    )
}

关键修正点说明 #

• 动态属性访问：你之前用的a.column是在访问对象中名为column的固定属性，而不是你通过prop传入的'rank'字段。当属性名是变量时，必须用方括号语法a[column]才能正确获取对应属性的值。
• 避免修改原始数据：Array.sort()是原地排序方法，会直接改变原数组。用[...data]创建数组的浅拷贝，再对拷贝后的数组排序，这样不会污染原始的data变量，避免后续使用原数据时出现意外问题。

扩展支持字符串排序（可选） #

如果需要支持按name这类字符串字段排序，可以扩展排序函数：

const sortedData = [...data].sort((a, b) => {
    const valA = a[column]
    const valB = b[column]
    // 数字类型直接相减排序
    if (typeof valA === 'number' && typeof valB === 'number') {
        return valA - valB
    }
    // 字符串类型按中文/英文字典序排序
    return valA.localeCompare(valB)
})

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