如何在React中过滤数组onClick

import React, { useState } from 'react';

function MyComponent() {
  const [originalArray, setOriginalArray] = useState([]);
  const [filteredArray, setFilteredArray] = useState([]);

  // 其他组件逻辑...

  return (
    // JSX代码...
  );
}

export default MyComponent;

useEffect(() => {
  // 模拟异步获取原始数组数据
  const fetchData = async () => {
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();
    setOriginalArray(data);
  };

  fetchData();
}, []);

const handleFilter = (filterValue) => {
  const filtered = originalArray.filter(item => item.includes(filterValue));
  setFilteredArray(filtered);
};

return (
  <div>
    <input type="text" onChange={(e) => handleFilter(e.target.value)} />
    <ul>
      {filteredArray.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  </div>
);