React 排序在第一次尝试时无法正常工作答案

【问题标题】：React sorting doesn't work right on the first tryReact 排序在第一次尝试时无法正常工作
【发布时间】：2021-10-24 04:54:02
【问题描述】：

我有以下组件，其中一个选择会改变我的sorting 状态

const [sorting, setSorting] = useState(""); 
const priceAsc = (r1, r2) => {
    return r2.euroPrice - r1.euroPrice;
  };
  const priceDesc = (r1, r2) => {
    return r1.euroPrice - r2.euroPrice;
  };
  useEffect(() => {
    console.log(sorting);
    switch (sorting) {
      case "price:asc":
        console.log("here!");
        setRoutes(routes.sort(priceAsc));
        break;
      case "price:desc":
        console.log("now here!");
        setRoutes(routes.sort(priceDesc));
        break;
      default:
        setRoutes(routes.sort(priceAsc));
        break;
    }
  }, [sorting]);

问题是如果我第一次选择价格上涨选项，我的程序输出

price:asc
here!

这应该意味着它按价格对我的数组进行升序排序，但实际上是降序排序。如果我更改选择，那么它会像我期望的那样对其进行排序。所以这只会在我第一次选择ascending 选项时发生

【问题讨论】：

标签： reactjs

【解决方案1】：

Array.sort对数组in place进行排序。因为状态必须被视为不可变的，所以您必须使用新数组更新状态。

setRoutes([...routes.sort(priceAsc)])

【讨论】：