基于选择数组筛选对象数组，输出匹配对象的实现求助

你的需求是**同时匹配category含"A"、level含"lv3"、size含"large"**的对象，之前的代码要么是分开单字段筛选后只取了一个结果，要么用了||逻辑（满足任意一个就返回），都不符合“同时满足”的要求。下面给你正确的实现方案：

问题拆解 #

你之前的两种尝试都存在问题：

• 第一种是分别对level、category、size单独筛选，但最后只把level的筛选结果赋值给了状态，等于只做了单字段筛选，没把三个条件结合起来
• 第二种用了||逻辑，这会返回只要满足其中一个条件的对象，和你要的“同时满足所有条件”完全相反

正确代码示例 #

假设你的原始数据结构是这样的：

const Data = [
  { category: "A", level: "lv3", size: "large", name: "课程1" },
  { category: "B", level: "lv3", size: "large", name: "课程2" },
  { category: "A", level: "lv2", size: "large", name: "课程3" },
  // 更多数据...
];

固定条件对应关系的实现 #

如果selection数组的顺序固定（[category值, level值, size值]），可以直接在filter里同时校验三个条件：

import { useState, useEffect } from 'react';

function CourseList() {
  const [courseData, setCourseData] = useState(Data);
  const [updatedCourseData, setUpdatedCourseData] = useState(courseData);
  const selection = ["A", "lv3", "large"];

  // 监听数据或筛选条件变化，自动更新筛选结果
  useEffect(() => {
    const filtered = courseData.filter(item => {
      // 每个条件都要满足，用&&连接
      const matchCategory = item.category.toLowerCase() === selection[0].toLowerCase();
      const matchLevel = item.level.toLowerCase() === selection[1].toLowerCase();
      const matchSize = item.size.toLowerCase() === selection[2].toLowerCase();
      
      return matchCategory && matchLevel && matchSize;
    });
    setUpdatedCourseData(filtered);
  }, [courseData, selection]);

  // 渲染筛选后的列表
  return (
    <ul>
      {updatedCourseData.map(course => (
        <li key={course.name}>{course.name}</li>
      ))}
    </ul>
  );
}

更灵活的条件映射实现 #

如果selection的顺序不固定，或者想让筛选条件更清晰，建议把筛选条件定义成键值对，再用every方法校验所有字段：

// 用键值对定义筛选条件，对应字段和要匹配的值
const filterRules = {
  category: "A",
  level: "lv3",
  size: "large"
};

// 筛选逻辑
const filtered = courseData.filter(item => {
  // 遍历所有筛选规则，确保每个字段都匹配
  return Object.entries(filterRules).every(([field, targetValue]) => {
    return item[field].toLowerCase() === targetValue.toLowerCase();
  });
});

关键说明 #

• 用&&连接多个条件，确保只有同时满足所有条件的对象才会被保留
• 加入toLowerCase()做大小写不敏感匹配，避免因为大小写差异导致匹配失败
• 用useEffect监听courseData和筛选条件的变化，自动触发筛选，符合React的状态更新逻辑

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