如何在useEffect Hook中运行独立函数？多条件职位筛选组件疑问

核心问题在于你之前的工作类型筛选直接基于当前jobs（可能已是筛选后的结果）过滤，导致取消选中时无法回到原始列表。正确思路是将所有筛选条件维护为状态，统一基于原始jobs列表在useEffect中完成多条件联合筛选。

步骤1：添加工作类型选中状态 #

在父组件中新增状态存储选中的工作类型：

const [selectedJobTypes, setSelectedJobTypes] = useState([]);

步骤2：修改筛选处理函数 #

filterJobsByTypeHandler无需直接过滤职位，仅负责更新选中状态即可：

const filterJobsByTypeHandler = useCallback((jobTypes) => {
  setSelectedJobTypes(jobTypes);
}, []);

用useCallback包裹是为了避免子组件WorkType不必要重渲染，setSelectedJobTypes是React提供的稳定函数，所以依赖数组为空。

步骤3：统一多条件筛选逻辑 #

更新原有useEffect，加入工作类型筛选逻辑，所有条件均基于原始jobs列表判断：

useEffect(() => {
  const newFilteredJobs = jobs.filter((job) => {
    // 关键词匹配
    const matchesSearch = job.title.toString().toLowerCase().includes(searchField.toLowerCase());
    // 职位类别匹配
    const matchesCategory = job.category.toString().toLowerCase().includes(categorySearchField.toLowerCase());
    // 工作类型匹配：选中列表为空则全部通过，否则检查是否在选中列表内
    const matchesType = selectedJobTypes.length === 0 
      ? true 
      : (job.jobType !== undefined && selectedJobTypes.includes(job.jobType.toString()));

    return matchesSearch && matchesCategory && matchesType;
  });
  setFilteredJobs(newFilteredJobs);
}, [jobs, searchField, categorySearchField, selectedJobTypes]);

步骤4：子组件WorkType交互逻辑 #

确保子组件在用户选中/取消选中时，传递完整的选中数组给父组件：

// WorkType组件示例
const WorkType = ({ onFilterJobsByType }) => {
  const [localSelectedTypes, setLocalSelectedTypes] = useState([]);

  const handleTypeToggle = (type) => {
    const newSelected = localSelectedTypes.includes(type)
      ? localSelectedTypes.filter(t => t !== type)
      : [...localSelectedTypes, type];
    setLocalSelectedTypes(newSelected);
    onFilterJobsByType(newSelected);
  };

  return (
    <div>
      {['Full-time', 'Part-time', 'Contract'].map(type => (
        <label key={type}>
          <input
            type="checkbox"
            checked={localSelectedTypes.includes(type)}
            onChange={() => handleTypeToggle(type)}
          />
          {type}
        </label>
      ))}
    </div>
  );
};

问题根源说明 #

你之前的filterJobsByTypeHandler直接用当前jobs过滤，但该jobs可能已经是关键词/类别筛选后的结果，取消选中时无法恢复原始列表。现在所有筛选逻辑基于原始jobs，通过状态控制生效条件，就能正确处理选中/取消选中的场景。

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