React Hooks+TypeScript复选框过滤数组异常求助

核心问题 #

你当前的代码直接修改了students状态，点击男性复选框后，状态里只剩下男性数据，此时再点击女性复选框，是从仅存的男性数据里过滤女性，自然找不到结果，导致功能异常。同时，当前逻辑也不支持多选（比如同时显示男女性）和取消选择恢复全部的需求。

修复步骤 #

1. 保留原始数据源：把初始学生数据存为常量，避免过滤时覆盖原始数据。
2. 新增过滤状态：用selectedGenders跟踪用户选中的性别，支持多选和取消操作。
3. 更新过滤逻辑：根据选中的性别集合，从原始数据中过滤出符合条件的内容，而非修改原始状态。
4. 优化复选框事件处理：处理复选框的勾选/取消状态，维护selectedGenders的正确性。

修改后的完整代码 #

import React, { useState } from "react";

// 原始数据源，作为常量保存，不被修改
const ORIGINAL_STUDENTS = [
  { id: 1, title: "Akita from place1", race: "Akita", gender: 'female' },
  { id: 2, title: "Akita from place2", race: "Akita", gender: 'female' },
  { id: 3, title: "Akita from place3", race: "Akita", gender: 'female' },
  { id: 4, title: "Chihuahua from place4", race: "Chihuahua" , gender: 'male' },
  { id: 5, title: "Cockapoo from place5", race: "Cockapoo" , gender: 'male'},
  { id: 6, title: "Dachshund from place6", race: "Dachshund", gender: 'male' },
  { id: 7, title: "Dutch Shepherd from place7", race: "Dutch Shepherd" , gender: 'female' },
  { id: 8, title: "Bulldog from place8", race: "Bulldog", gender: 'male' },
  { id: 9, title: "Goldador from place9", race: "Goldador", gender: 'female' },
];

const App = () => {
  // 跟踪选中的性别集合
  const [selectedGenders, setSelectedGenders] = useState<string[]>([]);

  const filterData = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, checked } = e.target;
    setSelectedGenders(prev => {
      if (checked) {
        // 勾选时添加性别到集合
        return [...prev, value];
      } else {
        // 取消勾选时移除对应性别
        return prev.filter(gender => gender !== value);
      }
    });
  };

  // 根据选中的性别过滤原始数据
  const filteredStudents = selectedGenders.length === 0 
    ? ORIGINAL_STUDENTS 
    : ORIGINAL_STUDENTS.filter(student => selectedGenders.includes(student.gender));

  return (
    <div>
      <h3>app</h3>
      Male: <input type="checkbox" name='male' value='male' onChange={filterData} />
      Female: <input type="checkbox" name='female' value='female' onChange={filterData} />
      {filteredStudents
        .map((student) => {
          return (
            <div key={student.id}>
              {student.id}-{student.title}-{student.race}-{student.gender}
            </div>
          );
        })}
    </div>
  );
};

export default App;

逻辑说明 #

• 原始数据ORIGINAL_STUDENTS始终保持完整，作为过滤的基础。
• selectedGenders数组记录用户勾选的性别，勾选时添加、取消时移除。
• filteredStudents在渲染时动态计算：如果没有选中任何性别，显示全部；否则显示匹配选中性别的学生。
• 这样既解决了点击女性复选框无效的问题，还支持同时勾选男女显示全部对应数据，取消勾选也能恢复显示。

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