如何解决功能组件中的去抖动
import React,{useCallback,Component,useState} from 'react';
import debounce from 'lodash.debounce';
function Tags() {
const [type,setType] = useState('');
...
async function getSearchTag(keyword) {
....
await axios.post(ajax_url,{keyword,tags : disabled_tags});
};
const onChangeDebounced = useCallback(debounce(getSearchTag(value),500),[value]);
const handleInputChange = (event) => {
// Immediately update the state
setValue(event.target.value);
// Execute the debounced onChange method
onChangeDebounced(event.target.value);
}
return (
<div>
...
<input type="text" name="tags" placeholder="Search for other tags..." onChange={(e) =>
handleInputChange(e)}/>
</div>
);
}
export default Tags;
这是我第一次在 React 中设置 debounce
,我正在尝试将现有的 react class component
转换为 react functional component
。
我需要将 value
state
传递给 getSearchTag()
,以上实现是否正确?
解决方法
您已将依赖项作为值添加到 useCallback
,这会导致新的每次值状态更改时都会创建去抖动函数,这是导致问题的原因。
另外你只需要pass a function reference to debounce
而不是调用它
您创建去抖动函数的更新方式如下
const onChangeDebounced = useCallback(debounce(getSearchTag,500),[]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。