React如何将双按钮分别控制升序降序改为单按钮切换排序

单按钮切换排序的实现方案 #

步骤1：新增排序方向状态 #

在组件内部新增state，用来记录当前的排序方向：

// 1代表升序，-1代表降序，初始默认可以按需设置
const [sortDir, setSortDir] = useState(1);

步骤2：合并两个排序函数为单个切换函数 #

把升序、降序逻辑合并，每次点击自动翻转排序方向，同时修复原代码中字符串排序的错误逻辑：

const toggleSort = (e) => {
  let uname = [...userdata];
  // 点击后翻转排序方向
  const newSortDir = sortDir * -1;
  setSortDir(newSortDir);

  switch (e.target.id) {
    case "name":
      // 字符串排序不要用减法运算，改用localeCompare兼容性更好
      uname = uname.sort((a, b) => a.name.localeCompare(b.name) * newSortDir);
      break;   
    default:
  }
  // 此处需要将排序后的数组更新到你的状态中，示例：setUserdata(uname)，原代码缺少这步会导致页面不刷新
};

步骤3：优化按钮显示（可选） #

可以根据当前排序方向动态修改按钮文本，提升用户体验：

<button id="name" onClick={toggleSort}>
  按姓名{sortDir === 1 ? '升序' : '降序'}
</button>

逻辑说明 #

• 用排序系数乘以排序返回值的写法，不需要单独调用reverse方法，代码更简洁
• 如果后续需要新增其他排序字段，只需要在switch语句中新增对应case即可，无需重复写切换逻辑
• 如果排序字段是数字类型，可以把a.name.localeCompare(b.name)替换为a.age - b.age这类数字运算写法即可

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