如何基于多个条件进行过滤: ReactJS

import React, { useState } from 'react';

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

const FilteredList = () => {
  const [filter, setFilter] = useState({ name: '', age: '', city: '' });

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

  const filteredData = data.filter((item) => {
    return (
      item.name.toLowerCase().includes(filter.name.toLowerCase()) &&
      (filter.age === '' || item.age === parseInt(filter.age)) &&
      item.city.toLowerCase().includes(filter.city.toLowerCase())
    );
  });

  return (
    <div>
      <input
        type="text"
        name="name"
        placeholder="Name"
        value={filter.name}
        onChange={handleFilterChange}
      />
      <input
        type="text"
        name="age"
        placeholder="Age"
        value={filter.age}
        onChange={handleFilterChange}
      />
      <input
        type="text"
        name="city"
        placeholder="City"
        value={filter.city}
        onChange={handleFilterChange}
      />

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

export default FilteredList;