React中筛选列表渲染后如何重置useState至初始状态？

核心问题分析 #

问题根源在于将原始数据源和展示用的过滤后数据共用了同一个状态，导致每次筛选都会修改数据源，后续筛选只能基于上一次的结果；而错误的重置时机又触发了状态更新→重新渲染→再次重置的无限循环。

解决方案：分离原始数据源与展示数据 #

始终保留一份完整的原始项目数组作为筛选的基准，展示用的列表基于原始数组实时计算，而非修改原始数据状态。

1. 静态数据场景（数据固定） #

如果项目列表是静态的，直接将完整数据定义为组件外的常量，避免被修改：

// 完整的原始项目数组，永远不修改
const ALL_PROJECTS = [
  { id: 1, name: "项目A", category: "frontend" },
  { id: 2, name: "项目B", category: "backend" },
  // ...其他项目
];

function ProjectFilter() {
  // 仅维护筛选条件的状态
  const [activeFilter, setActiveFilter] = useState("all");

  // 基于原始数组和筛选条件计算展示列表，用useMemo避免重复计算
  const displayProjects = useMemo(() => {
    if (activeFilter === "all") {
      return ALL_PROJECTS;
    }
    // 每次筛选都从原始数组出发
    return ALL_PROJECTS.filter(project => project.category === activeFilter);
  }, [activeFilter]); // 仅当筛选条件变化时重新计算

  const handleFilterClick = (filter) => {
    setActiveFilter(filter);
    // 无需额外重置，因为每次都是基于原始数组重新筛选
  };

  return (
    <div>
      <button onClick={() => handleFilterClick("all")}>全部项目</button>
      <button onClick={() => handleFilterClick("frontend")}>前端项目</button>
      <button onClick={() => handleFilterClick("backend")}>后端项目</button>

      <div className="project-list">
        {displayProjects.map(project => (
          <div key={project.id}>{project.name}</div>
        ))}
      </div>
    </div>
  );
}

2. 动态数据场景（从接口获取） #

如果项目列表是动态获取的，将完整的接口返回数据存入独立状态，作为筛选基准：

function ProjectFilter() {
  // 存储完整的原始项目数据，仅在接口请求成功时更新
  const [originalProjects, setOriginalProjects] = useState([]);
  const [activeFilter, setActiveFilter] = useState("all");
  const [loading, setLoading] = useState(true);

  // 仅在组件挂载时请求数据
  useEffect(() => {
    fetch("/api/projects")
      .then(res => res.json())
      .then(data => {
        setOriginalProjects(data);
        setLoading(false);
      })
      .catch(err => console.error(err));
  }, []);

  // 基于原始数据和筛选条件计算展示列表
  const displayProjects = useMemo(() => {
    if (loading) return [];
    if (activeFilter === "all") {
      return originalProjects;
    }
    return originalProjects.filter(project => project.status === activeFilter);
  }, [originalProjects, activeFilter, loading]);

  const handleFilterClick = (filter) => {
    setActiveFilter(filter);
  };

  // 渲染逻辑同静态场景
}

为什么能解决无限循环？ #

之前的resetProjects触发无限循环，通常是因为你在渲染流程或依赖项包含状态的useEffect中调用了它，导致状态更新→组件重新渲染→再次调用重置函数的循环。

现在的方案中，原始数据源ALL_PROJECTS或originalProjects只会在初始化/接口请求时设置一次，后续筛选完全基于它计算展示列表，不需要修改原始状态，自然避免了循环问题。

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