Lodash-debounce TypeError:需要一个函数react

Question

在数据表中键入和搜索内容时，我试图使用debounce函数来避免多次调用。我现在正在做的是在输入中

onChange={(e) => {
const delayedQuery = useCallback(debounce(this.handleSearch(e.target.value), 500));
return delayedQuery
}}

其中handeSearch是

handleSearch(filter) {
service.getData(filter).subscribe((data) => {console.log(data)})
}

但是我有这个错误CCD_ 3。这项服务正在运行，但取消了。它在我打字的同时一个字符一个字符地写，这是不对的。

Answer 1

不能在类组件或事件处理程序函数中使用钩子，必须将函数传递给lodash debounce。

此外；如果您尝试从事件中异步读取target.value，您将得到一个由于性能原因而重用此合成事件的错误。

在聊天中，我假设你使用rxjsfrom(promise)，所以你仍然有一个问题，当用户键入并触发异步请求时，他们可能会以不同的顺序解决。

参见下面的一个坏例子(快速键入hai，等待2秒，它解析为ha(

//simple debounce implementation
const debounce = (fn, delay = 50) => {
let time;
return (...args) => {
clearTimeout(time);
time = setTimeout(() => fn(...args), delay);
};
};
//service where you can subscribe to
const service = (() => {
let listeners = [];
const later = (value, time = 50) =>
new Promise((r) =>
//if search is 2 characters long it'll resolve much later
setTimeout(
() => r(value),
value.length === 2 ? 2000 : time
)
);
//subscribe returns an unsubscribe function
const subScribe = (fn) => {
listeners.push(fn);
//return the Subscriber object
//https://rxjs-dev.firebaseapp.com/api/index/class/Subscriber
return {
unsubscribe: () =>
(listeners = listeners.filter(
(listener) => listener !== fn
)),
};
};
//notify all listeners
const notify = (value) =>
listeners.forEach((listener) => listener(value));
return {
getData: (value) => ({
subScribe: (fn) => {
const unsub = subScribe(fn);
later(value).then((value) => notify(value));
return unsub;
},
}),
};
})();
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = { asyncSearchResult: '' };
//use handleSearch to create a debounced version of it
this.handleSearchDebounced = debounce(
this.handleSearch
).bind(this); //you need to bind it to guearantee correct context
}
rendered = 0;
handleSearch = (value) =>
service
.getData(value)
.subScribe((value) =>
this.setState({ asyncSearchResult: value })
);
render() {
return (
<div>
<input
type="text"
// pass value to the handler, not the event
onChange={(e) =>
this.handleSearchDebounced(e.target.value)
}
/>
async result: {this.state.asyncSearchResult}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

以下是解决方案：

//simple debounce implementation
const debounce = (fn, delay = 50) => {
let time;
return (...args) => {
clearTimeout(time);
time = setTimeout(() => fn(...args), delay);
};
};
//service where you can subscribe to
const service = (() => {
let listeners = [];
const later = (value, time = 50) =>
new Promise((r) =>
//if search is 2 characters long it'll resolve much later
setTimeout(
() => r(value),
value.length === 2 ? 2000 : time
)
);
//subscribe returns an unsubscribe function
const subScribe = (fn) => {
listeners.push(fn);
//return the Subscriber object
//https://rxjs-dev.firebaseapp.com/api/index/class/Subscriber
return {
unsubscribe: () =>
(listeners = listeners.filter(
(listener) => listener !== fn
)),
};
};
//notify all listeners
const notify = (value) =>
listeners.forEach((listener) => listener(value));
return {
getData: (value) => ({
subScribe: (fn) => {
const unsub = subScribe(fn);
later(value).then((value) => notify(value));
return unsub;
},
}),
};
})();
const latestGetData = (value) => {
const shared = {};
return {
subScribe: (fn) => {
const current = {};
shared.current = current;
const subscriber = service
.getData(value)
.subScribe((result) => {
//only call subscriber of latest resolved
if (shared.current === current) {
fn(result);
}
subscriber.unsubscribe();
});
},
};
};
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = { asyncSearchResult: '' };
//use handleSearch to create a debounced version of it
this.handleSearchDebounced = debounce(
this.handleSearch
).bind(this); //you need to bind it to guearantee correct context
}
rendered = 0;
handleSearch = (value) =>
latestGetData(value).subScribe((value) =>
this.setState({ asyncSearchResult: value })
);
render() {
return (
<div>
<input
type="text"
// pass value to the handler, not the event
onChange={(e) =>
this.handleSearchDebounced(e.target.value)
}
/>
async result: {this.state.asyncSearchResult}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>