javascript - 将属于同一类别的复选框项目排列在一个部分中

Question

根据我的电子商务要求，我有一个由多个复选框组成的过滤器。用户选择一个或多个复选框来过滤表格中的项目列表。

复选框排列看起来像这样（示例）：

Mathematics
  maths checkbox1
  maths checkbox2
  maths checkbox3

Physics
  phy checkbox1
  phy checkbox2
  phy checkbox3
  

选择任何过滤器（复选框）时，过滤器必须显示在组件中，如下所示：

通过一些解决方法，我能够实现包含所选过滤器的单个数组，但不确定如何处理这种将属于同一类别的过滤器分组的特殊方式。

到目前为止尝试过：

 initialstate = {
       filters: [
            {
                title: '',
                options: [
                    {
                        name: '',
                        key: '',
                        label: '',
                    }
                ],
            }
        ],
       selected: []
    }

常量 setFilters = (值) => {

setFilterOptions((state) => {

    const selectedFilters = state.selected.find(
        (obj) => obj === value
    );

    const selected = selectedFilters
        ? state.selected.filter(
            (obj) => obj !== value
        )
        : [...state.selected, value];


    return {
        selected,
        filters: [
            ...state.filters.map((filter) => {
                return {
                    ...filter,
                    options: filter.options.map((ele) => {
                        return {
                            ...ele,
                            checked: selected.includes(ele.label)
                        };
                    })
                };
            })
        ]
    };
});

};

我能想到的算法：

1. 函数setFilters(value)采用label所选过滤器的 。
2. 组件状态：

const [filterOptions, setFilterOptions] = useState(initialState);

3. 在这个函数中，循环遍历state.selected对象数组并检查属于哪个类别value。
4. 如果该value类别不存在，请将其添加一个数组。如果它已经存在（对于同一类别），则将其推送到相应的数组。
5. 映射最终数组以呈现过滤器的名称（如图所示）。

我对如何实际实现这个逻辑有点困惑。

需要一点帮助才能以最好的方式实现这一点。

先感谢您。

标签： javascriptreactjscheckbox