React.js本地JSON数据按属性过滤功能实现求助

我帮你梳理问题并给出完整可运行的解决方案，你之前遇到的核心问题是缺少状态管理来跟踪当前激活的标签，且没有根据标签状态对数据做动态过滤，WEBPACK错误大概率是状态使用或事件绑定的问题导致的。以下是修复后的完整代码：

import React, { useState } from 'react';

export const ByCourse = () => {
  // 状态管理：跟踪当前激活的标签页，默认显示全部数据
  const [activeTab, setActiveTab] = useState("all");
  // 获取本地存储的项目数据
  const projects = window.projects.aaData;

  // 根据当前激活标签过滤数据的函数
  const getFilteredProjects = () => {
    switch(activeTab) {
      case "favorite":
        return projects.filter(project => project.favorite === true);
      case "recent":
        return projects.filter(project => project.recent === true);
      case "assigned":
        return projects.filter(project => project.userAssigned === true);
      case "all":
      default:
        return projects;
    }
  };

  return (
    <div className="section-component">
      <h2 className="mt-2 mb-4">By Course</h2>
      <ul className="nav nav-tabs">
        <li className="nav-item">
          {/* 动态设置激活样式，点击时更新状态并阻止默认跳转 */}
          <a 
            className={`nav-link ${activeTab === "all" ? "active" : ""}`} 
            href="#" 
            onClick={(e) => {
              e.preventDefault();
              setActiveTab("all");
            }}
          > 
            All 
          </a>
        </li>
        <li className="nav-item">
          <a 
            className={`nav-link ${activeTab === "favorite" ? "active" : ""}`} 
            href="#" 
            onClick={(e) => {
              e.preventDefault();
              setActiveTab("favorite");
            }}
          > 
            Favorite 
          </a>
        </li>
        <li className="nav-item">
          <a 
            className={`nav-link ${activeTab === "recent" ? "active" : ""}`} 
            href="#" 
            onClick={(e) => {
              e.preventDefault();
              setActiveTab("recent");
            }}
          > 
            Recent 
          </a>
        </li>
        <li className="nav-item">
          <a 
            className={`nav-link ${activeTab === "assigned" ? "active" : ""}`} 
            href="#" 
            onClick={(e) => {
              e.preventDefault();
              setActiveTab("assigned");
            }}
          > 
            Assigned 
          </a>
        </li>
      </ul>
      <div className="container">
        {/* 渲染过滤后的项目列表 */}
        {getFilteredProjects().map(project => (
          <div className="row" key={project.projectId}> {/* 添加唯一key避免React警告 */}
            <div className="w-100">
              <div className="d-flex border mt-1 mb-1 p-3">
                <div className="col-1">
                  {project.favorite ? <i className="fa fa-star"></i> : <i className="fa fa-star-o"></i>}
                </div>
                <div className="col-11">
                  <div className="font-weight-bold"> {project.projectTitle}</div>
                  <div className="font-weight-normal"> {project.ouName}</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

核心修改点说明： #

1. 修复导入错误：你之前错误导入了setState，React中useState会返回状态值和对应的更新函数，不需要单独导入setState。

2. 添加状态管理：用useState创建activeTab状态，记录当前选中的标签页，默认值设为"all"以显示全部数据。

3. 实现过滤逻辑：通过getFilteredProjects函数，根据activeTab的值动态返回对应过滤后的数组：

   • all：返回全部项目数据
   • favorite：筛选出favorite为true的项目
   • recent：筛选出recent为true的项目
   • assigned：筛选出userAssigned为true的项目

4. 优化标签交互：

   • 给每个标签的点击事件添加e.preventDefault()，阻止<a>标签默认的锚点跳转行为
   • 点击标签时调用setActiveTab更新当前激活状态
   • 通过模板字符串动态给nav-link添加active类，实现标签激活样式的切换

5. 添加唯一Key：在列表渲染时给每个项目添加key={project.projectId}，这是React列表渲染的最佳实践，避免控制台警告。

关于之前的WEBPACK错误分析： #

大概率是因为你尝试的方案中存在以下问题：

• 错误使用状态（比如未正确导入useState，或状态更新逻辑有误）
• 未处理<a>标签的默认跳转行为，导致页面刷新干扰React状态更新
• 过滤逻辑未与状态关联，引发语法或逻辑错误

现在上述代码可以完美实现你的需求，点击不同标签页即可看到对应过滤后的项目数据。

内容的提问来源于stack exchange，提问作者Fernando Löpez