React排序状态仅第二次点击生效，首次点击无响应如何解决？

核心问题原因 #

• React的状态更新是异步的，调用setSortBy后不会立刻修改当前作用域下的sort变量，当前渲染周期内拿到的sort永远是本次组件渲染时的初始值
• 你在调用setSortBy后立刻执行sorter和trimData，此时用的还是更新前的旧sort值，所以第一次点击排序不生效，第二次点击时才能拿到上一次更新后的sort值，看起来像是第二次才生效
• 额外注意：原生Array.sort是原地排序，会直接修改原数组，可能引发额外的副作用问题

推荐解决方案（两种二选一即可） #

方案1：直接使用新的排序参数，不依赖当前闭包的旧状态 #

调整handleOnsortChange逻辑，直接使用回调拿到的新排序参数，同时修改sorter函数接收排序参数作为入参，不直接读取外部的sort状态：

1. 修改handleOnsortChange：

const handleOnsortChange = (newSort) => {
  setSortBy(newSort);
  // 直接用新的排序参数，不走当前作用域的旧sort
  const sortedItems = [...items].sort((a, b) => sorter(a, b, newSort));
  trimData(sortedItems, pageNumber, 50);
};

2. 修改sorter函数：

const sorter = (a, b, sort) => {
  const nameA = a.FullName.toUpperCase();
  const nameB = b.FullName.toUpperCase();

  let compare = 0;
  if (sort.sortBy === "fullName") {
    compare = nameA.localeCompare(nameB); // 也可以直接用localeCompare简化比较逻辑
  }
  return sort.order === "asc" ? compare : -compare;
};

方案2：用useEffect监听状态变化，走声明式更新逻辑 #

更符合React设计范式的写法，把排序和数据裁剪的逻辑和状态变更绑定，只要依赖的状态变化就自动执行对应逻辑，后续如果新增分页切换、数据源变化等场景，不需要重复写排序裁剪逻辑，维护成本更低：

1. 简化handleOnsortChange，仅负责更新状态：

const handleOnsortChange = (values) => {
  setSortBy(values);
};

2. 新增useEffect监听依赖变更：

useEffect(() => {
  // 先浅拷贝数组再排序，避免原地修改原数组
  const sortedItems = [...items].sort(sorter);
  trimData(sortedItems, pageNumber, 50);
// 依赖项要包含所有用到的外部变量，漏写会导致逻辑不触发
}, [sort, pageNumber, items])

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