React项目使用HTML range滑块实现价格过滤仅数值下调生效问题

核心问题 #

• 你的过滤逻辑每次都使用上一次过滤后的数据集作为源数据：当你把滑块调到500后，存储展示数据的newData已经被覆盖为仅包含价格≤500的商品，后续再上调滑块到600时，从已经被裁剪的newData里筛选价格≤600的商品，自然不会出现更高价位的商品。
• React的state更新是异步操作：你在checkChange中调用setApplyFilter修改filterItems后，立即调用applyFilter读取到的还是修改前的旧状态，逻辑判断会延迟一个渲染周期生效。
• 存在冗余状态和命名冲突：filterItems状态可以直接通过sliderValue推导，不需要单独存储；同时你定义的函数名与状态更新方法语义冲突，容易引发逻辑错误。

修复后的代码 #

const Shop = () => {
  const [sliderValue, setValue] = useState(0);
  // 仅存储过滤后的数据，原始全量data始终保留不修改
  const [filteredData, setFilteredData] = useState(data);

  const handleChange = (e) => {
    // 滑块返回值为字符串类型，转成数字避免比较异常
    const currentValue = Number(e.target.value);
    setValue(currentValue);
  };

  useEffect(() => {
    if (sliderValue > 3) {
      // 每次过滤都基于原始全量data执行
      const result = data.filter(item => item.price <= sliderValue);
      setFilteredData(result);
    } else {
      // 阈值小于等于3时恢复全量数据
      setFilteredData(data);
    }
  }, [sliderValue]);

  return (
    <div className="slider-container">
      <input
        type="range"
        min={0}
        max={1000}
        value={sliderValue}
        onChange={handleChange}
        className="slider"
      />
      {/* 后续商品列表渲染使用filteredData即可 */}
    </div>
  );
}

修改说明 #

1. 所有过滤操作始终基于原始全量data执行，不会修改源数据，上调滑块时可以正常筛选出符合更高阈值的商品
2. 移除了冗余的filterItems状态与多余的工具函数，直接在useEffect中基于滑块值做过滤逻辑，规避异步state更新带来的逻辑延迟问题
3. 对滑块返回的字符串类型值做了数字转换，避免字符串与数字比较出现的异常问题
4. 调整了状态命名，语义更清晰，避免命名冲突

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