React中如何用复选框过滤数据？已实现复选框状态切换

我有如下数据：

const dataList = [
  {
    id: 1,
    title: 'obj1',
    published: true,
  },
  {
    id: 2,
    title: 'obj2',
    published: true,
  },
  {
    id: 3,
    title: 'obj3',
    published: false,
  },
  {
    id: 4,
    title: 'obj4',
    published: true,
  },
  {
    id: 5,
    title: 'obj5',
    published: false,
  },
];

同时有两个复选框，对应的数据结构如下：

filterList = [
    {
      id: 1,
      title: 'published',
      label: 'published',
      checked: false,
    },
    {
      id: 2,
      title: 'unpublished',
      label: 'unpublished',
      checked: false,
    },
];

我已经实现了复选框的状态切换，但不知道怎么用它们过滤上面的dataList。我尝试在下面的函数里实现过滤逻辑，希望得到指导：

const applyFilter = () => {
    let updData = dataList;
    const filterChecked = filterList.filter((item: any) => item.checked);

    if (filterChecked.length) {
      // 怎么根据复选框的动态值来过滤？
      updData = updData.filter((item) => item.published === //true//);
    }
};

核心思路是把选中的复选框转换成对应的published布尔值集合，再判断数据项是否符合条件。直接修改applyFilter函数即可：

const applyFilter = () => {
    let updData = [...dataList]; // 复制原数组，避免修改原始数据
    const filterChecked = filterList.filter(item => item.checked);

    if (filterChecked.length) {
        // 建立复选框title和published值的映射
        const filterMap = {
            published: true,
            unpublished: false
        };
        // 提取选中项对应的目标值
        const targetValues = filterChecked.map(item => filterMap[item.title]);
        // 过滤出符合条件的数据
        updData = updData.filter(item => targetValues.includes(item.published));
    }
    // 返回过滤后的结果，或者根据你的框架更新状态（比如React的setState）
    return updData;
};

逻辑拆解： #

1. 先复制原数组，防止操作时改动原始数据。
2. 筛选出所有被勾选的复选框。
3. 用filterMap明确映射关系，把复选框的title转换成对应的published布尔值，得到需要匹配的值集合targetValues。
4. 过滤数据，只保留published值在targetValues里的项。

不同勾选场景的效果： #

• 只勾published：只保留published: true的项（obj1、obj2、obj4）。
• 只勾unpublished：只保留published: false的项（obj3、obj5）。
• 两个都勾：返回全部数据（因为targetValues包含true和false，所有项都符合）。
• 都不勾：返回全部数据（跳过过滤逻辑）。

这种写法扩展性也强，后续如果加新的过滤选项，只需要在filterMap里加新的映射就行。

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