Search函数在React中无响应

Question

我正在使用过滤器函数在前端构建搜索函数，它没有抛出任何错误，但没有响应，我在搜索栏中输入单词并按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;

Answer 1

查看代码，我可以看到您需要在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;

Answer 2

试着修复这部分，看看是否有效，

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