React应用排序异常：切换部门视图后无法恢复姓名排序

问题核心诊断 #

你的问题根源在于**cards状态被意外篡改**，或者重置逻辑没有引用到真正的「原始姓名排序数据源」。当你点击部门排序时，如果直接对cards数组进行排序修改（而非生成新数组），后续再调用setSearchResults(cards)时，cards已经是部门排序后的数组，自然无法恢复初始的姓名排序。

具体修复步骤 #

1. 锁定原始数据源，确保cards始终保持姓名排序 #

初始化cards时，直接生成并固定按姓名排序的原始数组，后续绝对不修改cards本身，所有排序操作都基于它创建新数组：

// 在App组件中初始化状态
import employeeData from './你的员工数据源路径';

const App = () => {
  // 初始化时就生成按姓名排序的原始数组，用函数式初始化避免重复计算
  const [cards, setCards] = useState(() => {
    return [...employeeData].sort((a, b) => a.name.localeCompare(b.name));
  });
  const [searchResults, setSearchResults] = useState(cards);
  // ...其他状态和逻辑
};

2. 修改部门排序逻辑，基于原始cards生成新数组 #

点击「Department Listing」时，不要直接修改cards，而是拷贝原始数组后再排序，更新searchResults：

// 部门排序的处理函数（放在App或SearchDepartments组件中）
const handleDepartmentSort = () => {
  // 拷贝原始cards数组，避免修改原数据
  const sortedByDepartment = [...cards].sort((a, b) => {
    return a.department.localeCompare(b.department);
  });
  setSearchResults(sortedByDepartment);
};

3. 重置「Employees」和「Reset」按钮的逻辑 #

确保按钮点击时，直接使用原始的cards数组重置结果，而不是依赖其他可能被修改的变量：

// 在SearchText组件的按钮逻辑中
const handleReset = () => {
  // 直接用原始cards重置结果
  setSearchResults(cards);
  // 同时清空搜索文本（如果有）
  setSearchText('');
};

const handleEmployeesView = () => {
  setSearchResults(cards);
};

4. 排查全局是否有修改cards的代码 #

检查所有调用setCards的地方，如果存在修改cards的逻辑（比如排序后更新cards），必须删除。cards应该是只读的原始数据源，所有视图切换都只更新searchResults。

验证效果 #

完成上述修改后：

• 初始加载时searchResults等于cards，按姓名排序
• 点击「Department Listing」生成部门排序的新数组，更新searchResults
• 点击「Employees」或「Reset」时，searchResults被重置为原始的姓名排序数组

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