Javascript React中的搜索函数无响应

我正在使用过滤功能在前端构建一个搜索功能，它没有抛出任何错误，但没有响应，我在搜索栏中输入单词，然后按enter键，但没有任何效果。从服务器日志中，我可以看出，按enter键时，它没有向API发出请求。下面是我的代码：

function Search() {
  const [data, setData] = React.useState([]);
  const [searchTerm, setSearchTerm] = React.useState("");
  const [searchResults, setSearchResults] = React.useState([]);
  const handleChange = e => {
    setSearchTerm(e.target.value);
  };
  const getData = () => {
    axios.get("http://localhost:8000/CBView")
         .then(res => (setData(res.data)))
  }
  React.useEffect(() => {
    const results = data.filter(item =>
      item.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default Search;

函数搜索（）{
const[data，setData]=React.useState（[]）；
const[searchTerm，setSearchTerm]=React.useState（“”）；
常量[searchResults，setSearchResults]=React.useState（[]）；
常量handleChange=e=>{
设置搜索项（如目标值）；
};
常量getData=（）=>{
axios.get（“http://localhost:8000/CBView")
。然后（res=>（setData（res.data）））
}
React.useffect（（）=>{
const results=data.filter（项=>
item.toLowerCase（）.includes（搜索术语）
);
设置搜索结果（结果）；
}，[searchTerm]）；
返回(

{searchResults.map（项=>(
{item}
))}

);
}
导出默认搜索；

查看代码，我可以看出，当searchTerm更改时，您需要调用API 请看下面的代码

import React from "react";

function Search() {
  const [data, setData] = React.useState([]);
  const [searchTerm, setSearchTerm] = React.useState("");
  const [searchResults, setSearchResults] = React.useState([]);
  const handleChange = e => {
    setSearchTerm(e.target.value);
  };
  const getData = () => {
    axios.get("http://localhost:8000/CBView").then(res => setData(res.data));
  };
  React.useEffect(() => {
    if (searchTerm) {
      getData();
    }
  }, [searchTerm]);

  React.useEffect(() => {
    if(data){
        const results = data.filter(item =>
            item.toLowerCase().includes(searchTerm)
        );
        setSearchResults(results); 
    }
  }, [data]);
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default Search;

从“React”导入React；
函数搜索（）{
const[data，setData]=React.useState（[]）；
const[searchTerm，setSearchTerm]=React.useState（“”）；
常量[searchResults，setSearchResults]=React.useState（[]）；
常量handleChange=e=>{
设置搜索项（如目标值）；
};
常量getData=（）=>{
axios.get（“http://localhost:8000/CBView）然后（res=>setData（res.data））；
};
React.useffect（（）=>{
如果（搜索术语）{
getData（）；
}
}，[searchTerm]）；
React.useffect（（）=>{
如果（数据）{
const results=data.filter（项=>
item.toLowerCase（）.includes（搜索术语）
);
设置搜索结果（结果）；
}
}，[数据]；
返回(

{searchResults.map（项=>(
{item}
))}

);
}
导出默认搜索；

尝试修复此部件，看看是否有效

React.useEffect(() => {
    const results = data.filter(item =>
      item.toLowerCase().search(searchTerm.toLowerCase()) !== -1
    );
    setSearchResults(results);
  }, [searchTerm]);

---

handleChange函数包含在上面的第5行@JoelI认为这可能有效，从我可以从日志中检查到，现在在搜索栏中输入时，它确实向API发出请求，但是屏幕一片空白，我的CPU和RAM使用率超过90%，计算机冻结。我已经改变了api，在后端实现了searchfunction。前端处理搜索输入并获取结果。我的应用程序仍然会冻结我的电脑。我该怎么办？我在数据的useEffect上添加了一个条件。你能试试吗