React过滤后数据丢失：二次过滤无返回结果的技术求助

数据老陈

2026-8-19

React过滤功能重复执行无结果的问题解决

问题根源

你当前的实现直接用过滤后的结果覆盖了filteredList状态。第一次过滤后，filteredList已经是原始数据的子集，后续再执行过滤时，只能基于这个子集继续筛选，多次操作后就会出现无数据返回的情况。

修正方案

需要单独维护一份完整的原始数据状态，每次过滤都基于原始数据进行，而不是已过滤后的结果。

修改后的代码示例

const [originalList, setOriginalList] = useState([]); // 保存完整原始数据
const [filteredList, setFilteredList] = useState([]);
const [searchquery, setSearchquery] = useState("");
const [isLoaded, setIsLoaded] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
  fetch("api/device/getall")
    .then((res) => res.json())
    .then(
      (result) => {
        setIsLoaded(true);
        setOriginalList(result); // 存入原始数据
        setFilteredList(result); // 初始化过滤列表为原始数据
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    );
}, []);

const FilterSearchQuery = () => {
  // 基于原始数据过滤，而非已过滤的列表
  return originalList.filter((item) =>
    item.deviceName
      .toString()
      .toLowerCase()
      .includes(searchquery.toLowerCase())
  );
};

useEffect(() => {
  // 每次搜索词变化时，基于原始数据重新过滤
  const filteredData = FilterSearchQuery();
  setFilteredList(filteredData);
}, [searchquery]);