React js，javascript没有正确过滤答案

【问题标题】：React js, javascript not filtering properlyReact js，javascript没有正确过滤
【发布时间】：2021-08-26 22:36:34
【问题描述】：

我正在尝试为我正在开发的网站制作过滤器功能，我正在使用 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>
      );
}

【问题讨论】：

你试过 setData([...filteredData]) 吗？
现在试过了，不行。

标签： javascript html reactjs

【解决方案1】：

问题：您将data 更改为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);
        }
   }
}

Working example

【讨论】：

此答案将原始列表中的项目子集复制到新的状态切片中。这些都不是必需的。请考虑我的回答。

【解决方案2】：

我认为这与这两行有关：

const filteredData = newData.filter((item) => item.price <= sliderValue);
setData(filteredData);

一旦您过滤了一次数据，您所在州的newData 的值将只是已经过滤的数据。

假设我们从价格开始：newData=[100, 200, 300, 400]

我们第一次将其过滤到 200，所以现在newData=[100, 200]

接下来我们过滤最多 300 个，但 newData 只有 [100, 200]

所以只需将这两行更改为：

const filteredData = data.filter((item) => item.price <= sliderValue);
setData(filteredData);

这是假设您有一个变量 data 声明或导入到某个地方并带有完整的数据集。

【讨论】：

【解决方案3】：

您不需要数据数组的状态，因为它可以根据其他状态在每次渲染时确定。

const Shop = ({ inputData }) => {
  const [sliderValue, setValue] = useState(0);

  // This flag is deterministic based on sliderValue, so determine it here
  const filterItems = sliderValue > 3;

  // The items that will make it past the filter are deterministic, based on your filterItems flag
  // so no state is necessary
  const renderItems = filterItems ? inputData.filter(i => i.price <= sliderValue) : inputData;

  const handleChange = (value) => {
    setValue(value);
  };

  return ...
};

【讨论】：