我有一个自动完成组件,需要来自两个单独的 API 的结果。由于是自动完成功能,因此这两个 API 都需要在去抖动期间一起调用。我正在使用react-redux和redux-api。这是我到目前为止所拥有的。请看我返回的Search方法。问题是只发生了一个呼叫。
在我的 AutoCompleteContainer.js 中
const mapDispatchToProps = dispatch => {
const debounceDispatch = debounce(dispatch, 500);
return {
search(term) {
return Promise.all([
// Fix me! Only one of the calls below happens.
debounceDispatch(rest.actions.suggestions({ q: term })),
debounceDispatch(rest.actions.concepts({ corpus: 'desc', term: [term] }))
]);
},
async reset() {
await dispatch(rest.actions.suggestions.reset());
await dispatch(rest.actions.concepts.reset());
}
};
};
我应该在组件级别去抖吗?或者可以在这里完成吗?
您需要有一个可以调度这两个操作的函数,然后用
debounce
装饰该函数。
所以像这样:
const handleAutocomplete = () => {
dispatch(rest.actions.suggestions({ q: term })),
dispatch(rest.actions.concepts({ corpus: 'desc', term: [term] }))
}
const debounceHandleAutocomplete = debounce(handleAutocomplete,500)
我已经声明并使用去抖来通过以下方式触发动作多时间
const debounce = (fn, delay = 5000) => {
let time
return (...args) => {
clearTimeout(time)
time = setTimeout(() => fn(...args), delay)
}
}
useEffect(() => {
if (!isEmpty(clientInput)) {
debounce(fetchQuickSearchClients([ typeof clientInput === 'string' ? clientInput : clientInput.clientId ]), 3000)
}
}, [ clientInput ])