React下拉菜单排序每次返回随机值，如何获取预期值？

1. 确保排序逻辑与下拉选项一一对应 #

检查你的排序函数，必须针对每个下拉选项值（比如「价格升序」「名称降序」等）设置明确的排序规则，不能出现随机逻辑分支。

示例排序函数（以商品列表为例）：

const sortData = (data, sortType) => {
  // 先拷贝原数组，避免原地修改导致状态混乱
  const sortedData = [...data];
  switch(sortType) {
    case "price-asc":
      return sortedData.sort((a, b) => a.price - b.price);
    case "price-desc":
      return sortedData.sort((a, b) => b.price - a.price);
    case "name-asc":
      return sortedData.sort((a, b) => a.name.localeCompare(b.name));
    default:
      return sortedData; // 默认返回原数组，不要返回随机排序结果
  }
};

2. 正确维护排序选项的状态 #

确保下拉选择的状态（比如selectedSortType）能正确更新，且每次排序都严格基于该状态值执行，而非其他随机参数。

示例组件结构：

import { useState } from 'react';

function SortableList() {
  const [listData, setListData] = useState([/* 你的初始数据 */]);
  const [selectedSort, setSelectedSort] = useState("default");

  // 每次状态变化时重新计算排序后的数据
  const sortedList = sortData(listData, selectedSort);

  return (
    <div>
      <select 
        value={selectedSort}
        onChange={(e) => setSelectedSort(e.target.value)}
      >
        <option value="default">默认排序</option>
        <option value="price-asc">价格从低到高</option>
        <option value="price-desc">价格从高到低</option>
        <option value="name-asc">名称正序</option>
      </select>
      <ul>
        {sortedList.map(item => (
          <li key={item.id}>{item.name} - ${item.price}</li>
        ))}
      </ul>
    </div>
  );
}

3. 避免数组原地排序的坑 #

Array.sort()是原地排序，会直接修改原数组，这可能导致状态数据混乱，出现类似随机排序的异常。必须先拷贝原数组（比如用[...data]或data.slice()）再执行排序。

4. 排查其他干扰逻辑 #

• 如果数据是异步获取的，确保排序操作在数据加载完成后执行；
• 检查是否有其他代码片段修改了原始数据状态，导致排序前的数据就已被篡改。

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