未来的读者;这个错误可以简单地通过在main函数中包含你试图排序的任何东西的列表来修复。
例如：

const App = () => {
    const items = [
        {id: 1, title: 'Topic 1', value: 2},
        {id: 2, title: 'Topic 2', value: 5},
        {id: 3, title: 'Topic 3', value: 1},
        {id: 4, title: 'Topic 4', value: 4},
        {id: 5, title: 'Topic 5', value: 3},
    ]

    <div className="flex flex-col gap-4 w-full p-6 items-center">

    {items.sort((a, b) => b.value - a.value).map((item, index) => (
        <div 
            className="flex gap-2 px-4 items-center h-10 w-full rounded-md text-lg bg-[#ffd700]"
            key={index}
        >
            <div>
                {item.title}
                {item.value}
            </div>
            /5
        </div>
     ))}

    </div>
}

问题是.sort()改变了原始数组。您可以通过克隆数组并对其进行排序来修复此问题。

我认为这个错误是由于在.map函数中使用了(而不是{。.map函数的正确语法是：

items.map((item, index) => {
  return <>...</>
})

您的示例将适用于以下内容：

const items = [
    {id: 1, title: 'Topic 1', value: 2},
    {id: 2, title: 'Topic 2', value: 5},
    {id: 3, title: 'Topic 3', value: 1},
    {id: 4, title: 'Topic 4', value: 4},
    {id: 5, title: 'Topic 5', value: 3},
]

<div className="flex flex-col gap-4 w-full p-6 items-center">

    {items.sort((a, b) => b.value - a.value).map((item, index) => {
        <div 
            className="flex gap-2 px-4 items-center h-10 w-full rounded-md text-lg bg-[#ffd700]"
            key={index}
        >
            <div>
                {item.title}
                {item.value}
            </div>
            /5
        </div>
     })}

</div>