React中根据Checkbox状态更新filterCandidates数组

原代码存在的核心问题 #

1. 勾选操作时，[...filteredCandidates, experiencedCandidates]会把数组嵌套存入状态，导致filteredCandidates变成数组的数组，无法直接使用候选人数据。
2. 取消勾选时，prev.totalExperience != value逻辑完全错误——prev是候选人数组，不存在totalExperience属性，根本无法完成过滤。
3. 直接操作filteredCandidates状态，没有考虑多复选框同时选中的场景，容易出现状态不一致的问题。

修正后的完整代码 #

推荐通过维护「选中的经验区间集合」来管理状态，逻辑更清晰、健壮：

import { useState, useMemo } from "react";

function ExperienceFilter({ candidates }) {
  // 用Set存储选中的经验区间，避免重复值，增删操作更高效
  const [selectedExperiences, setSelectedExperiences] = useState(new Set());

  const experienceOptions = [
    { value: "1-2", label: "1-2 Years" },
    { value: "3-4", label: "3-4 Years" },
    { value: "5-6", label: "5-6 Years" },
    { value: "7-8", label: "7-8 Years" },
    { value: "9-10", label: "9-10 Years" },
  ];

  function handleChange(e) {
    const { value, checked } = e.target;
    setSelectedExperiences(prev => {
      const newSet = new Set(prev);
      checked ? newSet.add(value) : newSet.delete(value);
      return newSet;
    });
  }

  // 实时计算过滤后的候选人，用useMemo缓存结果优化性能
  const filteredCandidates = useMemo(() => {
    // 若未选中任何选项，返回空数组（可根据需求改为返回全部候选人）
    if (selectedExperiences.size === 0) return [];
    return candidates.filter(candidate => 
      selectedExperiences.has(candidate.totalExperience)
    );
  }, [candidates, selectedExperiences]);

  return (
    <div>
      <div className="flex flex-col space-y-3 bg-green-600 px-5 pr-20 py-10">
        <div>Years of Experience</div>
        {experienceOptions.map((option, index) => (
          <label key={index}>
            <input
              type="checkbox"
              value={option.value}
              name={option.label}
              onChange={handleChange}
              checked={selectedExperiences.has(option.value)} // 同步复选框选中状态
            />
            {option.label}
          </label>
        ))}
      </div>
    </div>
  );
}

export default ExperienceFilter;

关键修改说明 #

1. 用Set管理选中状态：避免重复选中同一区间，增删操作更直观，同时解决了多复选框状态同步的问题。
2. 添加checked属性：让复选框UI和状态保持一致，避免出现「状态已更新但UI没变化」的情况。
3. 用useMemo缓存过滤结果：只有当候选人列表或选中状态变化时才重新计算，优化组件性能。
4. 清晰的过滤逻辑：只要候选人的经验区间在选中集合内，就会被保留，逻辑一目了然。

备选方案（直接操作filteredCandidates） #

如果一定要直接操作候选人数组状态，可修正原逻辑（不推荐，多复选场景下易出错）：

function handleChange(e) {
  const { value, checked } = e.target;
  const targetCandidates = candidates.filter(c => c.totalExperience === value);

  setFilteredCandidates(prev => {
    if (checked) {
      // 避免重复添加相同候选人
      const isAlreadyAdded = prev.some(c => targetCandidates.includes(c));
      return isAlreadyAdded ? prev : [...prev, ...targetCandidates];
    } else {
      // 移除所有对应经验区间的候选人
      return prev.filter(c => c.totalExperience !== value);
    }
  });
}

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