ReactJS 初学者多组复选框联合筛选前序结果被覆盖如何解决

问题根因 #

你的代码存在2个核心错误导致筛选失效：

1. 事件处理逻辑错误：两类复选框共用同一个handleChange1回调，勾选任意选项会同时写入learningDirection和targetAudience两个状态数组，无法区分筛选维度。
2. 筛选逻辑冲突：useEffect中先后两次调用setFilteredlist，后一次基于原始数据集的筛选结果直接覆盖了前一次的结果，两个筛选条件没有叠加生效。

修正方案 #

1. 拆分事件回调，区分两类复选框的操作

// 学习方向复选框变更回调
const handleLearningDirectionChange = (e) => {
  if (e.target.checked) {
    setlearningDirection([...learningDirection, e.target.value]);
  } else {
    setlearningDirection(learningDirection.filter(item => item !== e.target.value));
  }
};

// 受众复选框变更回调
const handleTargetAudienceChange = (e) => {
  if (e.target.checked) {
    settargetAudience([...targetAudience, e.target.value]);
  } else {
    settargetAudience(targetAudience.filter(item => item !== e.target.value));
  }
};

2. 重写useEffect筛选逻辑，叠加双维度条件

useEffect(() => {
  // 先复制原始数据集
  let filteredResult = [...searchLists];
  // 应用学习方向筛选
  if (learningDirection.length > 0) {
    filteredResult = filteredResult.filter(item => 
      learningDirection.includes(item.learningDirection)
    );
  }
  // 在上面的结果基础上应用受众筛选
  if (targetAudience.length > 0) {
    filteredResult = filteredResult.filter(item => 
      targetAudience.includes(item.targetAudience)
    );
  }
  // 最终更新筛选结果
  setFilteredlist(filteredResult);
}, [learningDirection, targetAudience]);

3. 修改复选框渲染的回调绑定

给两类复选框分别绑定对应的回调，同时补充key属性避免React警告：

{/* 学习方向复选框组 */}
<FormControl>
  <FormGroup>
    {filterList.map((item) => (
      <FormControlLabel
        type="checkbox"
        control={<Checkbox onChange={handleLearningDirectionChange} />}
        label={item.learningDirection}
        value={item.learningDirection}
        key={item.learningDirection}
      />
    ))}
  </FormGroup>
</FormControl>

{/* 受众复选框组 */}
<FormControl>
  <FormGroup>
    {filterList2.map((item) => (
      <FormControlLabel
        type="checkbox"
        control={<Checkbox onChange={handleTargetAudienceChange} />}
        label={item.targetAudience}
        value={item.targetAudience}
        key={item.targetAudience}
      />
    ))}
  </FormGroup>
</FormControl>

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