React列表排序功能异常：切换里程排序时仍展示旧价格排序结果

1. React的状态更新是异步批量执行的，你在调用setSorting(e.target.value)后立即读取sorting变量，拿到的还是本次渲染时的旧值，所以排序判断逻辑永远匹配的是上一次选中的规则，这是点击最低里程却执行旧排序的核心原因。
2. 原生Array.sort()是原地排序方法，会直接修改原数组的内容而不生成新的数组引用，React会认为数组状态没有发生变化，可能出现不触发页面重渲染的问题。
3. 原有代码缺少「里程从高到低」对应的判断分支，该选项选中后不会触发任何排序逻辑。
4. 原有价格排序逻辑写反：pricelow（价格从低到高）的判断分支里写的是b.carPrice - a.carPrice，实际实现的是价格从高到低的效果。

App.js #

const [carList, setCarList] = useState(cars)
const [sorting, setSorting] = useState("pricelow")

const handleSort = (e) => {
  // 直接从事件对象拿到最新的排序值，不用等状态更新
  const newSortValue = e.target.value
  setSorting(newSortValue)
  // 拷贝原数组生成新引用，避免原地修改原状态
  const sortedList = [...carList]

  switch(newSortValue) {
    case "pricelow":
      sortedList.sort((a,b) => parseInt(a.carPrice) - parseInt(b.carPrice))
      break
    case "pricehigh":
      sortedList.sort((a,b) => parseInt(b.carPrice) - parseInt(a.carPrice))
      break
    case "kmlow":
      sortedList.sort((a,b) => parseInt(a.carMileage) - parseInt(b.carMileage))
      break
    case "kmhigh":
      sortedList.sort((a,b) => parseInt(b.carMileage) - parseInt(a.carMileage))
      break
    default:
      break
  }

  setCarList(sortedList)
}

AdsList.js代码无需修改，原有逻辑可正常运行。

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