过滤多个字段react

import React, { useState } from 'react';

const FilterComponent = () => {
  const [filter1, setFilter1] = useState('');
  const [filter2, setFilter2] = useState('');
  const [data, setData] = useState([
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 },
  ]);

  const handleFilter1Change = (event) => {
    setFilter1(event.target.value);
  };

  const handleFilter2Change = (event) => {
    setFilter2(event.target.value);
  };

  const filteredData = data.filter((item) => {
    return item.name.includes(filter1) && item.age.toString().includes(filter2);
  });

  return (
    <div>
      <input type="text" value={filter1} onChange={handleFilter1Change} placeholder="Filter by name" />
      <input type="text" value={filter2} onChange={handleFilter2Change} placeholder="Filter by age" />

      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>{item.name} - {item.age}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilterComponent;