React 如何通过复选框组件实现按状态筛选展示表格数据

1. 对齐状态值映射，避免大小写匹配失效 #

首先把复选框选项值和本地JSON的STATUS字段值做统一映射，避免因为大小写不一致（比如复选框存的是小写pending，JSON里是"Pending"）导致筛选失效：

// 统一状态映射规则
const STATUS_VALUE_MAP = {
  all: "all",
  pending: "Pending",
  "in progress": "In Progress",
  dispensed: "Dispensed"
}

2. 完善复选框的状态存储与交互逻辑 #

你已经为复选框绑定了组件状态，这里建议把所有筛选项的勾选状态存在同一个状态对象里，比散落存多个独立状态更好维护，同时处理“全部”选项和其他单项的联动逻辑：

import { useState } from 'react'
// 组件内状态：存储每个筛选项的勾选状态，默认选中“全部”
const [selectedFilters, setSelectedFilters] = useState({
  all: true,
  pending: false,
  "in progress": false,
  dispensed: false
})

// 复选框变更的事件处理函数
const onFilterToggle = (e) => {
  const { name, checked } = e.target
  setSelectedFilters(prev => {
    // 处理点击“全部”的场景
    if (name === STATUS_VALUE_MAP.all) {
      return checked
        // 勾选全部时，取消其他所有单选项的选中
        ? { all: true, pending: false, "in progress": false, dispensed: false }
        // 取消全部勾选时，保留原有状态不做改动
        : prev
    }
    // 处理点击单个状态选项的场景
    const nextState = { ...prev, all: false, [name]: checked }
    // 如果所有单选项都被取消勾选，自动切回“全部”选中状态
    const hasAnySingleSelected = Object.keys(nextState)
      .filter(key => key !== "all")
      .some(key => nextState[key])
    if (!hasAnySingleSelected) nextState.all = true
    return nextState
  })
}

对应的MUI复选框绑定要注意把每个Checkbox的name属性设成和上面状态对象的key完全一致：

// 举个单个复选框的绑定示例
<FormControlLabel
  control={
    <Checkbox
      name="pending"
      checked={selectedFilters.pending}
      onChange={onFilterToggle}
    />
  }
  label="待处理"
/>

3. 实现表格数据的动态筛选 #

用useMemo根据当前选中的筛选条件，从本地原始JSON数据中过滤出需要展示的表格行，避免重复遍历带来的性能损耗：

import { useMemo } from 'react'
// 假设rawPatientData是你引入的本地JSON文件中的全量患者表格数据
const renderTableRows = useMemo(() => {
  // 如果“全部”处于选中状态，直接返回全量原始数据
  if (selectedFilters.all) return rawPatientData
  // 收集所有被勾选的单状态对应的实际STATUS值
  const matchedStatusList = Object.keys(selectedFilters)
    .filter(key => key !== "all" && selectedFilters[key])
    .map(key => STATUS_VALUE_MAP[key])
  // 过滤出STATUS在匹配列表内的行
  return rawPatientData.filter(row => matchedStatusList.includes(row.STATUS))
}, [rawPatientData, selectedFilters])

最后把表格组件的渲染数据源，从原来的rawPatientData替换成上面计算得到的renderTableRows即可。

开发注意事项：

• 逐行核对本地JSON内STATUS字段的实际值（大小写、空格），确保和映射表内的值完全匹配，这是最常见的筛选失效原因
• 补充筛选后的空状态逻辑，当匹配结果为空时展示对应的提示文案，避免渲染空白表格
• 上述逻辑天然兼容多选场景（同时勾选待处理、进行中两个选项），不需要额外修改

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