React多选Checkbox下拉框如何按选中id筛选todo任务数据

问题根因 #

• 子组件CheckBoxDropDown调用传入的onChange方法时，仅传递了当前选中的todo id数组这一个参数，你在父组件定义handleFilterTasks时多写了无用参数，拿到的第二个参数本身就是undefined，逻辑自然无法运行。
• 原有筛选逻辑错误地把id当做数组下标去取tasks的元素，同时判断条件写反，无法匹配需求。

正确实现代码 #

直接修改App.js中的handleFilterTasks方法即可：

const handleFilterTasks = (selectedIds) => {
  // 无选中项时默认返回全部任务，可按需调整为返回空数组
  if (selectedIds.length === 0) {
    setFilteredData(tasks);
    console.log(tasks);
    return;
  }
  // 筛选出id在选中列表中的todo项
  const filteredTasks = tasks.filter(task => selectedIds.includes(task.id));
  setFilteredData(filteredTasks);
  console.log(filteredTasks);
}

兼容场景补充 #

如果下拉框选项的value存的是字符串类型的id，和接口返回的数字类型id不匹配的话，修改判断逻辑做类型统一即可：

const filteredTasks = tasks.filter(task => selectedIds.includes(String(task.id)));

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