React商品列表价格排序功能失效问题排查与修复

核心问题 #

1. 价格字段无法直接数值比较：你的price是带"LKR"前缀的字符串（比如"LKR 1500"），直接拿字符串做减法或比较会得到NaN，导致排序逻辑完全失效。
2. 数组排序未触发重渲染：如果直接对原数组调用sort()，这个方法会修改原数组本身，React依赖状态的引用变化来更新组件，原数组引用没变的话，列表不会重新渲染。

修复步骤 #

1. 提取价格的纯数值

用正则表达式去掉"LKR"和无关字符，把字符串转成数字后再做排序比较。

2. 操作数组副本而非原数组

用扩展运算符(...)或者slice()生成原数组的副本，再对副本排序，保证更新状态时是新的数组引用，触发组件重渲染。

修复后的代码示例（CardSection.jsx） #

假设你的组件逻辑是基于sortOption状态更新列表，修复后的代码如下：

import { useState, useEffect } from 'react';

// 封装提取价格数值的工具函数，避免重复代码
const extractPriceNumber = (priceStr) => {
  // 去掉所有非数字和小数点的字符，转成数字
  const numStr = priceStr.replace(/[^0-9.]/g, '');
  return parseFloat(numStr) || 0;
};

const CardSection = ({ cameraShowList }) => {
  const [sortOption, setSortOption] = useState('default');
  const [sortedCameraList, setSortedCameraList] = useState(cameraShowList);

  useEffect(() => {
    // 每次排序前先创建原数组的副本
    let listCopy = [...cameraShowList];

    if (sortOption === 'lowToHigh') {
      listCopy.sort((a, b) => {
        const priceA = extractPriceNumber(a.price);
        const priceB = extractPriceNumber(b.price);
        return priceA - priceB;
      });
    } else if (sortOption === 'highToLow') {
      listCopy.sort((a, b) => {
        const priceA = extractPriceNumber(a.price);
        const priceB = extractPriceNumber(b.price);
        return priceB - priceA;
      });
    }

    setSortedCameraList(listCopy);
  }, [sortOption, cameraShowList]);

  // 下拉菜单的onChange逻辑
  const handleSortChange = (e) => {
    setSortOption(e.target.value);
  };

  return (
    <div>
      <select value={sortOption} onChange={handleSortChange}>
        <option value="default">默认排序</option>
        <option value="lowToHigh">价格从低到高</option>
        <option value="highToLow">价格从高到低</option>
      </select>
      {/* 渲染sortedCameraList的商品卡片 */}
    </div>
  );
};

export default CardSection;

额外提示 #

• 如果cameraShowList是父组件传入的props，一定要把它加入useEffect的依赖数组，否则父组件更新商品列表时，排序不会同步生效。
• 正则表达式/[^0-9.]/g可以兼容不同格式的价格字符串（比如"LKR1200"或"LKR 1,200.50"），如果你的价格格式固定，也可以用更精准的正则，比如/LKR\s*/g。

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