React中如何基于多复选框选中状态筛选对象数组

1. React 中 useState 的更新是异步操作，你在调用 setcheck 后立即执行 handleChange，此时拿到的 check 仍然是更新前的旧状态，无法获取到最新的复选框选中情况。
2. 原有 handleChange 逻辑错误：每次筛选仅针对当前触发事件的单个复选框状态，没有结合其他已选中的复选框条件，所以多选时只会保留最后一次选中的状态对应的数据。

第一步：优化状态更新逻辑 #

修改onChange函数，使用函数式更新保证状态更新基于最新的前值，不需要手动调用额外的筛选函数：

const onChange = (e) => {
  setcheck(prevState => ({ 
    ...prevState, 
    [e.target.name]: e.target.checked 
  }));
};

第二步：实现多条件筛选逻辑 #

直接基于check状态计算筛选后的发票列表，推荐用useMemo缓存结果避免不必要的重复计算：

import { useMemo, useEffect } from 'react';

// 筛选逻辑
const filteredInvoices = useMemo(() => {
  // 收集所有已选中的状态值
  const selectedStatus = [];
  if (check.paid) selectedStatus.push('paid');
  if (check.pend) selectedStatus.push('pending');
  if (check.draft) selectedStatus.push('draft');

  // 无选中项时默认返回全部发票，如需返回空可将此处改为 return []
  if (selectedStatus.length === 0) return invoice;

  // 保留状态在选中列表中的所有发票
  return invoice.filter(item => selectedStatus.includes(item.status));
}, [check, invoice]);

// 如需查看筛选结果，监听筛选后的数组即可
useEffect(() => {
  console.log(filteredInvoices);
}, [filteredInvoices]);

后续你直接使用filteredInvoices渲染列表即可，勾选多个复选框时会自动返回所有对应状态的发票数据。

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