React+TypeScript如何实现仅勾选单个复选框时触发source过滤

1. 调整过滤器字段配置 #

多选复选框的取值为数组格式，未勾选时默认值设为空数组即可，修改后配置如下：

const sourceFilterOptions = [
    { value: 'true', id: 'on', label: 'Source On'},
    { value: 'false', id: 'off', label: 'Source Off'}
]

const filterFields: any = [
    {
        name: 'source',
        type: 'checkbox',
        defaultValue: [], // 改为空数组，对应初始未勾选状态
        label: 'Source',
        options: sourceFilterOptions,
    }
]

2. 修改GraphQL查询参数类型 #

将source参数改为可选布尔类型，匹配后端接收的true/false格式，不需要过滤时可以不传入该参数：

query fetchData(
    $source: Boolean # 改为可选布尔类型，不要加非空标识!
) {
    some(
        source: $source
    ) {
        // 原有数据字段
    }
}

3. 调整请求变量组装逻辑 #

不要直接展开filtersValues，对source字段单独做规则校验，仅单选时才传入参数：

const variables = React.useMemo(
   () => {
      const baseVariables = {...queryOptions.variables}
      const selectedSource = filtersValues.source
      // 仅单选时传入source参数
      if (selectedSource?.length === 1) {
          baseVariables.source = selectedSource[0] === 'true'
      }
      return baseVariables
   },
    [queryOptions.variables, filtersValues]
);

4. 初始值/默认值适配 #

你使用的useFilters钩子会自动读取filterFields中配置的defaultValue，返回的filtersInitialValues和filtersDefaultValues里source字段默认就是空数组，不需要额外修改，重置操作也会自动回到未勾选的初始状态。

修改后完全匹配需求规则：

• 未勾选/同时勾选两个复选框：不传入source参数，后端返回全量数据
• 仅勾选Source On：传入source: true，返回开启状态数据
• 仅勾选Source Off：传入source: false，返回关闭状态数据

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