求助：基于技能数组实现多条件项目筛选功能（附代码）

嘿，我来帮你搞定这个技能筛选的问题！首先得先指出你当前代码里的两个小问题：

• 回调函数的参数名和外部的filter数组重名了，这会导致你根本没法访问到外部的筛选技能列表，反而把当前遍历的项目对象当成了filter，逻辑完全走偏啦；
• 你只判断了filter[0]，也就是只检查第一个筛选技能，完全没法处理多选的场景。

正确的实现思路 #

核心逻辑其实很清晰：

• 当用户选中单个技能时，筛选出techno数组包含该技能的项目；
• 当用户选中多个技能时，筛选出techno数组同时包含所有选中技能的项目。

我们可以用数组的every()方法来实现这个通用逻辑——它会检查数组里的每一个元素是否都满足条件，刚好适配多选时“同时拥有所有技能”的需求，单个技能的情况也能自动兼容。

完整代码示例 #

假设你用状态来管理用户选中的技能（比如通过复选框组选择），代码可以这么写：

import { useState } from 'react';

// 你的项目数据
const data = [
  { id: "1", name: "project1", techno: ["JAVASCRIPT", "REACTJS"], imageUrl: "link" },
  { id: "2", name: "project2", techno: ["HTML", "CSS", "SASS"], imageUrl: "link" },
  { id: "3", name: "project3", techno: ["JAVASCRIPT", "HTML"], imageUrl: "link" }
];

// 可选技能列表（就是你原来的filter数组）
const availableSkills = ["JAVASCRIPT", "HTML", "CSS"];

function ProjectList() {
  // 用状态存用户选中的技能，初始为空
  const [selectedSkills, setSelectedSkills] = useState([]);

  // 处理技能选择的函数（比如复选框 onChange 触发）
  const handleSkillSelect = (skill) => {
    setSelectedSkills(prev => {
      if (prev.includes(skill)) {
        // 如果已选中，就移除
        return prev.filter(s => s !== skill);
      } else {
        // 如果没选中，就添加
        return [...prev, skill];
      }
    });
  };

  return (
    <div>
      {/* 技能选择区 */}
      <div className="skill-filters">
        {availableSkills.map(skill => (
          <label key={skill}>
            <input
              type="checkbox"
              checked={selectedSkills.includes(skill)}
              onChange={() => handleSkillSelect(skill)}
            />
            {skill}
          </label>
        ))}
      </div>

      {/* 筛选后的项目列表 */}
      <div className="project-list">
        {data
          .filter(project => {
            // 没有选中任何技能时，返回所有项目
            if (selectedSkills.length === 0) return true;
            // 检查项目是否包含所有选中的技能
            return selectedSkills.every(skill => project.techno.includes(skill));
          })
          .map(({ id, ...otherProps }) => (
            <ProjectItem key={id} {...otherProps} />
          ))}
      </div>
    </div>
  );
}

// 假设你的ProjectItem组件
function ProjectItem({ name, techno, imageUrl }) {
  return (
    <div className="project-item">
      <img src={imageUrl} alt={name} />
      <h3>{name}</h3>
      <div className="tech-tags">
        {techno.map(tech => <span key={tech}>{tech}</span>)}
      </div>
    </div>
  );
}

代码解释 #

1. 状态管理：用useState维护用户选中的技能数组，确保能实时响应选择变化；
2. 筛选逻辑：
   • 当selectedSkills为空时，直接返回所有项目，保证初始状态显示全部内容；
   • 用every()方法遍历选中的技能，只有当项目的techno数组包含所有选中技能时，才会被保留下来，完美适配单/多选场景；
3. 避免变量冲突：把回调函数的参数改成project，再也不会和外部的筛选数组重名啦！

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