useEffect挂钩上的多个筛选器

import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState([]);
  const [filter1, setFilter1] = useState('');
  const [filter2, setFilter2] = useState('');

  useEffect(() => {
    // 根据filter1和filter2对数据进行筛选
    const filteredData = data.filter(item => {
      return item.property1 === filter1 && item.property2 === filter2;
    });

    // 更新筛选后的数据
    setData(filteredData);
  }, [filter1, filter2]);

  return (
    <div>
      {/* 筛选器1 */}
      <input type="text" value={filter1} onChange={e => setFilter1(e.target.value)} />

      {/* 筛选器2 */}
      <input type="text" value={filter2} onChange={e => setFilter2(e.target.value)} />

      {/* 显示筛选后的数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default App;