React点击按钮过滤JSON数据异常：二次过滤无结果求助

核心问题是你每次过滤都直接修改了存储数据的data状态——第一次筛选后data变成了对应类别的子集，后续再点其他类别时，只能从这个子集里匹配，自然返回0条结果。

解决思路： #

• 新增一个状态专门存储原始完整数据，避免过滤操作破坏数据源
• 过滤逻辑基于原始数据执行，只更新用于展示的data状态

修改后的完整代码示例： #

import { useState, useEffect } from 'react';

function ProductFilter() {
  // 用于展示过滤后的数据
  const [data, setData] = useState([]);
  // 存储从API获取的原始完整数据
  const [originalData, setOriginalData] = useState([]);

  const Fakestore = () => {
    fetch(`https://fakestoreapi.com/products`)
      .then((res) => res.json())
      .then((json) => {
        setData(json);
        setOriginalData(json); // 同步保存原始数据
      });
  };

  useEffect(() => {
    Fakestore();
  }, []);

  const filterType = (category) => {
    // 基于原始数据筛选，而非当前已过滤的data
    const filteredItems = originalData.filter(item => item.category === category);
    setData(filteredItems);
  };

  return (
    <div>
      <button onClick={() => filterType("men's clothing")}>男装</button>
      <button onClick={() => filterType("jewelery")}>珠宝</button>
      <button onClick={() => filterType("electronics")}>电子产品</button>
      <button onClick={() => filterType("women's clothing")}>女装</button>
      {/* 新增显示全部按钮，快速恢复初始状态 */}
      <button onClick={() => setData(originalData)}>显示全部</button>

      <div className="product-list">
        {data.map(item => (
          <div key={item.id} className="product-item">
            <h3>{item.title}</h3>
            <p>类别：{item.category}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default ProductFilter;

关键说明： #

1. originalData状态始终保留完整的API返回数据，不会被任何过滤操作修改
2. filterType函数每次都从完整的原始数据中筛选目标类别，确保每次筛选的数据源都是全量的
3. 新增的「显示全部」按钮可以快速重置展示数据到初始状态

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