React中如何基于状态实现复选框过滤展示接口返回数据的功能

步骤1：绑定复选框与publisher状态，实现勾选状态同步 #

首先编写状态更新函数，同步复选框的勾选结果到publisher状态：

const handlePublisherChange = (e) => {
  const { name, checked } = e.target;
  setPublisher(prev => ({
    ...prev,
    [name]: checked
  }));
};

编写复选框的JSX结构，注意input的name属性要和publisher状态的键一一对应：

<div className="checkbox-group">
  <label>
    <input
      type="checkbox"
      name="Nin"
      checked={publisher.Nin}
      onChange={handlePublisherChange}
    />
    Nintendo
  </label>
  <label>
    <input
      type="checkbox"
      name="MS"
      checked={publisher.MS}
      onChange={handlePublisherChange}
    />
    Microsoft
  </label>
  <label>
    <input
      type="checkbox"
      name="SN"
      checked={publisher.SN}
      onChange={handlePublisherChange}
    />
    Sony
  </label>
</div>

步骤2：基于状态生成过滤后的展示数据 #

不直接修改原始的data状态（保留全量基准数据），使用useMemo派生过滤后的结果，依赖项变化时才会重新计算，避免不必要的重复过滤，1000条量级的数据性能完全足够。
首先定义状态键和发行商全称的映射关系：

const publisherMap = {
  Nin: "Nintendo",
  MS: "Microsoft",
  SN: "Sony"
};

使用useMemo计算过滤结果：

// 组件顶部先引入useMemo
import { useMemo } from 'react';

// 组件内部计算过滤后的数据
const filteredData = useMemo(() => {
  // 提取所有被选中的发行商全称
  const selectedPublishers = Object.entries(publisher)
    .filter(([_, isChecked]) => isChecked)
    .map(([key]) => publisherMap[key]);
  
  // 没有勾选任何复选框时返回全量数据
  if (selectedPublishers.length === 0) return data;
  
  // 过滤出匹配选中发行商的条目
  return data.filter(item => selectedPublishers.includes(item.Publisher));
}, [data, publisher]);

步骤3：渲染商品列表 #

把原有渲染逻辑中用的data替换成上面生成的filteredData即可：

<div className="product-list">
  {filteredData.map(item => (
    <div key={item.id} className="product-card">
      {/* 原有卡片渲染逻辑 */}
      <h3>{item.productName}</h3>
      <p>发行商：{item.Publisher}</p>
    </div>
  ))}
</div>

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