在JS/React中有多行筛选数组的复选框

import React, { useState } from 'react';

const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
  // 更多数据项...
];

const App = () => {
  const [filter, setFilter] = useState({ name: false, age: false });

  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setFilter((prevFilter) => ({ ...prevFilter, [name]: checked }));
  };

  const filterData = () => {
    return data.filter((item) => {
      if (filter.name && item.name !== 'John') {
        return false;
      }
      if (filter.age && item.age > 30) {
        return false;
      }
      return true;
    });
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="name"
          checked={filter.name}
          onChange={handleCheckboxChange}
        />
        Filter by Name
      </label>
      <label>
        <input
          type="checkbox"
          name="age"
          checked={filter.age}
          onChange={handleCheckboxChange}
        />
        Filter by Age
      </label>

      <ul>
        {filterData().map((item) => (
          <li key={item.id}>{item.name} - {item.age}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;