React排序功能首次选择升序选项时实际按降序排列问题

问题根因 #

• 比较函数逻辑与命名不匹配：排序比较函数返回负数时r1会排在r2前，你当前定义的priceAsc返回r2.euroPrice - r1.euroPrice，实际是降序逻辑，priceDesc才是升序逻辑，首次触发时就会出现和预期相反的排序结果。
• 违反React状态不可变原则：Array.sort()是原地排序方法，会直接修改原routes状态数组，不会生成新的数组引用，可能导致React无法正确触发重渲染，出现排序结果和状态不同步的问题。
• useEffect闭包陷阱：你的useEffect依赖数组只写了sorting，但回调中用到了routes变量，导致回调里拿到的routes永远是初始渲染时的闭包值，首次排序用的是初始数组，后续也拿不到更新后的routes值。

修复方案 #

先修正比较函数逻辑，每次排序前拷贝原数组生成新引用，同时补全useEffect的依赖项，修复后代码如下：

const [sorting, setSorting] = useState(""); 
// 修正比较函数逻辑：asc是从小到大，返回r1 - r2
const priceAsc = (r1, r2) => {
    return r1.euroPrice - r2.euroPrice;
};
// 修正比较函数逻辑：desc是从大到小，返回r2 - r1
const priceDesc = (r1, r2) => {
    return r2.euroPrice - r1.euroPrice;
};
useEffect(() => {
    console.log(sorting);
    // 先拷贝原数组生成新引用，再执行排序，不修改原状态
    const sortedRoutes = [...routes];
    switch (sorting) {
      case "price:asc":
        console.log("here!");
        setRoutes(sortedRoutes.sort(priceAsc));
        break;
      case "price:desc":
        console.log("now here!");
        setRoutes(sortedRoutes.sort(priceDesc));
        break;
      default:
        setRoutes(sortedRoutes.sort(priceAsc));
        break;
    }
// 补全routes依赖
}, [sorting, routes]);

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