React useState：如何同时更新数组状态并排序？

你遇到的问题根源是Array.sort()是原地排序方法，它会直接修改原数组，而React要求状态更新必须基于不可变数据——直接修改原状态会导致React无法正确识别状态变化，甚至引发状态重置。

要实现添加元素的同时完成排序，你需要在创建新数组的基础上执行排序，而非直接修改原状态数组。具体实现如下：

const UpdateZoom = (scale: number) => {
  if (scale > 0) {
    setzoomFactors(prevFactors => {
      // 创建包含新元素的新数组
      const newFactors = [...prevFactors, scale];
      // 执行数字升序排序（若要降序则改为b - a）
      return newFactors.sort((a, b) => a - b);
    });
  }
};

关键细节说明 #

• 使用函数式更新（prevFactors => ...）：确保每次状态更新都基于最新的状态值，避免闭包导致的旧状态引用问题
• 保持状态不可变性：通过[...prevFactors]创建原数组的浅拷贝，再添加新元素，避免直接修改原状态数组
• 数字排序必须传入比较函数：默认sort()会把数字转为字符串按编码排序（比如10会排在2前面），(a,b)=>a-b才能实现正确的数字升序排序

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