javascript - React js，javascript没有正确过滤

Question

我正在尝试为我正在开发的网站制作过滤器功能，我正在使用 html 范围滑块。问题是值会在它们下降时更新，例如，如果我将滑块设置为 500 美元，则只会出现价格为 500 美元或更低的产品，如果我将值设置得较低，它将按预期方式工作工作，但如果我尝试将值设置得更大，项目将不会过滤，例如，值设置为 500 美元，如果将值设置为 600 美元，则只有 500 美元或以下的项目会呈现，而不是 600 美元的项目.

这是我的代码：

const Shop = () => {

      const [sliderValue, setValue] = useState(0);
      const [filterItems, setApplyFilter] = useState(false);
      const [newData, setData] = useState(data);
    
      const checkChange = () => {
        if (sliderValue > 3) {
          setApplyFilter(true);
        } else {
          setApplyFilter(false);
        }
        console.log(applyFilter);
      };
    
      const applyFilter = () => {
        if (filterItems === true) {
          const filteredData = newData.filter((item) => item.price <= sliderValue);
          console.log(filteredData);
          setData(filteredData);
        } else {
          setData(data);
        }
      };
    
      useEffect(() => {
        checkChange();
        applyFilter();
      }, [sliderValue]);
    
      const handleChange = (value) => {
        setValue(value);
      };
      return (
           <div className="slider-container">
                <input
                type="range"
                min={0}
                max={1000}
                value={sliderValue}
                onChange={(e) => handleChange(e.target.value)}
                className="slider"
                />
            </div>
      );
}

标签： javascripthtmlreactjs

Answer 1

问题：您正在更改datawith setData()，因此每次移动滚动条都会删除一些数据。如果您想保留constant对所有应用程序可用的信息，请考虑使用useRef(). 这将为组件的整个生命周期创建一个持久对象。

import { useRef } from 'react'

const Shop = () => {
   const dataArr = useRef(data) 
   ...
   const applyFilter = () => {
        if (filterItems === true) {
          // Access with "current" attribute
          const filteredData = dataArr.current
                                      .filter((item) => item.price <= sliderValue);
          setData(filteredData);
        }
   }
}

工作示例