如何解决仅当用户在 React 中按搜索或 Enter 时才获取数据？
代码：
while (std::getline(source,line)) {
lineNumber++;
pos = 0;
while ((pos = line.find(from,pos)) != std::string::npos) {
line.replace(pos,flen,to);
pos += tlen;
}
}
现在，这段代码运行良好。
但是当我点击 const App = () => {
const[datas,setDatas] = useState([]) //nothing to do with this.
const [space,setSpace] = useState(null)
const [print,setPrint] = useState(false)
function getData(val){
console.log(val.target.value)
setSpace(val.target.value);
setPrint(false)
}
console.log(space) //Returning inputted text in console. Works well
useEffect(() => {
const fecthPosts = async () => {
let initial_url = `http://localhost:4000/search`
let url = initial_url + "?text=" + space
const res = await fetch(url);
const {result} = await res.json();
setDatas(result);
fecthPosts();
},[space]);
return(
<div className="App">
{ //displaying on search
print?
<>
<h2>{space}</h2> //submited text
<div>
{results.map((field) =>
<p>{field.title}</p>
<p>{field.author}</p>
)}
</div>
</>
:null
}
<input type="text" onChange={getData} />
<button onClick={() => setSpace(true)}>search</button>
</div>
)
}
};
export default App;
时，
它从我输入的每个文本中获取数据。 Network Tab
onChange我不希望这种情况发生，因为我要发送的请求数量有限。
任何人都可以帮助解决这个问题。我尝试了几件事，但没有任何效果...
注意：我不能使用 search?text=s
search?text=sa
search?text=sam
search?text=sams
search?text=samsu
search?text=samsun
search?text=samsung
和任何其他有效的方法...仅在用户 Timeout 或 press enter 时搜索或获取数据。
解决方法
您可以在很短的超时时间内（例如，在输入后 2 秒不活动后）使用 ref 进行提取。
也不要忽略可能的错误 - 应始终避免未经处理的拒绝。
const timeoutRef = useRef();
useEffect(() => {
const doFetch = () => {
const url = 'http://localhost:4000/search?text=' + space
fetch(url)
.then(res => res.json())
.then(({ result }) => setDatas(result))
.catch(handleErrors); // don't forget this
};
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(doFetch,2000);
},[space]);
我认为代码存在一些问题，例如在显示搜索结果时，如果我理解正确：
{results.map((field) =>
应该
{datas.map((field) =>
对吗？
对于您当前的问题，
- 每次更改输入文本时，您都会调用搜索 API。
- 仅在点击
search按钮时显示搜索结果。
那么为什么不只在点击 search 按钮时触发 API 调用？
您可以使用 denounce，仅在 n 秒后调用搜索 API。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
