在React中，有没有一种方法可以让我只在有人停止输入时提交搜索请求

Question

我使用的是React 16.13.0。我有一个搜索框，人们可以在其中键入并期望在键入时看到结果。。。

return (
<div className="searchForm">
<input
type="text"
placeholder="Search"
value={this.state.searchTerm}
onChange={this.handleChange}
/>

我使用以下函数在人们键入时处理检索结果。。。

handleChange(event) {
const query = event.target.value;
if (!query) {
this.setState({ searchTerm: query, searchResults: [] });
} else {
this.setState({ searchTerm: query, loading: true }, () => {
this.doSearch(query);
});
}
}
doSearch = (query) => {
const searchUrl = "/coops/?contains=" + encodeURIComponent(query);
fetch(searchUrl, {
method: "GET",
})
.then((response) => response.json())
.then((data) => {
if (query === this.state.searchTerm) {
this.setState({
searchResults: data,
loading: false,
});
}
});
};

我正在努力减少拨打/处理网络电话的数量。如果有人键入一个字符串；res"；以相当快的方式，他们可能不关心"；r〃；或"；re；所以我想知道，如果在我的搜索框中输入了一封新信件，有没有办法取消请求？或者只有当有人停止输入至少100毫秒时才执行搜索(不确定这是否足够，但决定选择任意数量(？

Answer 1

你所追求的通常被称为debounce。有许多库实现了这一功能，包括lodash和下划线。例如，在lodash中，您将执行以下操作：

onChange={e => debouncedHandler(e, this.handleChange)}

并在组件的外部定义了以下：

const debouncedHandler = _.debounced((e, handler) => handler(e), 100);

在组件本身内部声明去抖动函数是一个常见的陷阱。这将不起作用，因为react在每次更改时都会重新运行该代码，从而重新创建去抖动函数，因此不会发生去抖动。因此，在组件外部定义去抖动函数是很重要的。

---

更新：我之前的代码中有一个错误。我想它现在已经修好了。我还没有测试过这个。

Answer 2

您可以通过setTimeout延迟搜索。只要在捕捉到新输入时清除超时即可。如果计时器过期，请执行请求

handleChange = (e) => {
this.setState(
{
searchTerm: e.target.value
},
() => {
try {
clearInterval(window.xhrSearchTimer);
} catch (e) {
console.log(`no timeout initialized`);
}
window.xhrSearchTimer = window.setTimeout(() => {
this.doSearch(this.state.searchTerm);
}, 1000); // arbitrary value
}
);
};
doSearch = () => {
alert(`Now searching for ${this.state.searchTerm}`);
};

https://codesandbox.io/s/loving-sid-hb0nr?file=/src/App.js:139-622

Answer 3

您可以使用类似的助手，并将调用函数作为第一个参数callback传递。

function getDoneTyping (callback, wait = 300) {
let timer
const keyDownHandler = event => {
if (event.key === 'Enter') {
callback()
}
clearTimeout(timer)
}
const keyUpHandler = event => {
clearTimeout(timer)
timer = setTimeout(callback, wait)
}
return { keyDownHandler, keyUpHandler }
}