React中useState无法及时触发更新：商品排序功能异常求助

问题现象 #

React中实现商品价格升降序排序时，下拉选择框切换排序规则页面无变化；但后续通过品牌/分类筛选商品时，会同时应用筛选规则和之前选中的排序规则，此时再切换排序选项功能恢复正常。

核心原因 #

Array.sort()是原地排序方法，会直接修改原数组。代码中直接对filterData（useState状态数组）调用sort，修改了原状态数组内容，但setFilterData传入的还是同一个数组引用。React对状态更新采用浅比较，认为状态未变化，因此不触发组件重新渲染。

后续筛选操作通常会生成新数组（如过滤后返回新数组），此时setFilterData传入新引用触发渲染，而之前排序已修改原数组内容，所以排序效果会和筛选一起生效。

修复方案 #

1. 避免直接修改原状态数组 #

排序前先创建原数组的副本，再对副本排序，确保setFilterData接收新数组引用。可通过扩展运算符[...filterData]或filterData.slice()实现。

2. 简化排序逻辑 #

用数值差值直接返回排序结果，简化条件判断，提升代码可读性。

修复后的完整代码 #

const [filterData, setFilterData] = useState(productDataList.products || []);

const sortItems = (e) => {
  const sortType = e.value;
  // 创建原数组副本，避免修改原状态
  const sortedProducts = [...filterData].sort((a, b) => {
    if (sortType === "LowToHigh") {
      return a.price - b.price;
    } else if (sortType === "HighToLow") {
      return b.price - a.price;
    }
    // 默认不排序
    return 0;
  });
  setFilterData(sortedProducts);
};

return (
  <select id="sortDropDown" onChange={(e) => sortItems(e.target)}>
    <option value="default">Sort by:</option>
    <option value="LowToHigh">Low to high</option>
    <option value="HighToLow">High to low</option>
  </select>
);

额外说明 #

• 若筛选功能也存在直接修改原数组的情况，建议同样采用创建副本的方式处理，保证状态更新的正确性
• 对于复杂的筛选+排序组合逻辑，建议将原始商品数据、筛选参数、排序参数分开维护（比如单独维护sortType状态，渲染时根据原始数据和参数计算最终列表），避免状态间相互污染

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