问题描述
代码:
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。