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

我正在做一个项目，但我需要添加一个输入，用户可以过滤学生名单 根据他们的名字，包括名字和姓氏，我已经从api获得了数据。问题是如何过滤数据，因为我是一个新手。我们将非常感谢您的帮助。以下是我到目前为止的情况

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import StudentData from './student_data/StudentData'
import './App.css';


function App() {
  const [students, setStudents] = useState(null);
  const studentdata = 'https://www.hatchways.io/api/assessment/students';

  function getStudents(){
    fetch(studentdata)
      .then(resp => resp.json())
      .then(data => {
        setStudents(data);
      })
  }


  return (
    <div className="App">
      <h1>Students</h1>

      <div>
        <button className="fetch-button" onClick={getStudents}>
          Get Students
        </button>
        <br />
      </div>

      <div className="search" id="search">
          <input type="text" ></input>
      </div>

      {students && students.students.map((student, index) => {
       var total = 0;
       for(var i = 0; i < student.grades.length; i++) {
        var grade = parseInt(student.grades[i]);
        total += grade;
       }
       const avg = total / student.grades.length;
       const average = avg.toString();


      return(
      <div className="student" key={index}>
        <div className="image">
          <img src={student.pic} id="icon"></img>
        </div>

        <div className="text">
          <h3 id="name">{student.firstName} {student.lastName}</h3>
          <p id="detail"><strong>EMAIL:</strong> {student.email}</p>
          <p id="detail"><strong>COMPANY:</strong> {student.company}</p>
          <p id="detail"><strong>SKILL:</strong> {student.skill}</p>
          <p id="detail"><strong>AVERAGE:</strong>: {average}%</p>
        </div>
      </div>

      )}
      )}
    </div>
  );
}

export default App;

---

稍微修改了代码，并检查这有助于过滤器

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [students, setStudents] = useState(null);
  const [filterData, setFilterData ] = useState(null);

  const studentdata = 'https://www.hatchways.io/api/assessment/students';

  function getStudents(){
    fetch(studentdata)
      .then(resp => resp.json())
      .then(data => {
        setFilterData(data.students);
        setStudents(data.students);
      })
  }

  const searchByName = (event) => {
    event.persist();
    // Get the search term
    const searchItem = event.target.value.trim();
    // If search term is empty fill with full students data
    if(!searchItem.trim()) {
      setFilterData(students);
    }
    // Search the name and if it found retun the same array
    const serachIn = (firstName, lastName) => {
      if(firstName.indexOf(searchItem) !== -1 || lastName.indexOf(searchItem) !== -1) {
        return true;
      }
      let fullName = firstName+" "+lastName;
      if(fullName.indexOf(searchItem) !== -1) {
        return true;
      }
      return false;
    };
    // Filter the array 
    const filteredData = students.filter((item) => {
      return serachIn(item.firstName, item.lastName);
    });
    // Set the state with filtered data
    setFilterData(filteredData);
  }

   return (
    <div className="App">
      <h1>Students</h1>

      <div>
        <button className="fetch-button" onClick={getStudents}>
          Get Students
        </button>
        <br />
      </div>

      <div className="search" id="search">
          <input type="text" name="serachByName" onChange={(e) => searchByName(e)} ></input>
      </div>

      {filterData && filterData.map((student, index) => {
       var total = 0;
       for(var i = 0; i < student.grades.length; i++) {
        var grade = parseInt(student.grades[i]);
        total += grade;
       }
       const avg = total / student.grades.length;
       const average = avg.toString();


      return(
      <div className="student" key={index}>
        <div className="image">
          <img src={student.pic} id="icon"></img>
        </div>

        <div className="text">
          <h3 id="name">{student.firstName} {student.lastName}</h3>
          <p id="detail"><strong>EMAIL:</strong> {student.email}</p>
          <p id="detail"><strong>COMPANY:</strong> {student.company}</p>
          <p id="detail"><strong>SKILL:</strong> {student.skill}</p>
          <p id="detail"><strong>AVERAGE:</strong>: {average}%</p>
        </div>
      </div>

      )}
      )}
    </div>
  );
}

---

请以多种方式检查我的关于过滤器。您还可以在此解决方案中添加一个去抖动延迟，以触发对输入字段的搜索，这样当您更改搜索以提高性能时，您就不会总是重新渲染。