如何将搜索栏添加到从api过滤数据的react应用程序？

import React, { useState } from 'react';

const SearchBar = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleInputChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const handleSearch = () => {
    onSearch(searchTerm);
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={handleInputChange}
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
};

export default SearchBar;

import React, { useState, useEffect } from 'react';
import SearchBar from './SearchBar';
import API from 'your-api-library';

const App = () => {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    // 在组件加载时获取数据
    API.getData().then((response) => {
      setData(response.data);
      setFilteredData(response.data);
    });
  }, []);

  const handleSearch = (searchTerm) => {
    // 根据搜索关键字过滤数据
    const filtered = data.filter((item) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredData(filtered);
  };

  return (
    <div>
      <SearchBar onSearch={handleSearch} />
      {/* 根据过滤后的数据进行展示 */}
      {filteredData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default App;