问题描述
我正在使用 react-mention 来允许用户在聊天中@someone。建议从后端加载。用户键入“@”后,我只想在他们停止键入后才访问服务器一次。我尝试使用 lodash debounce,但我认为我没有正确使用它,因为它所做的只是等待一段时间然后多次调用服务器。
const fetchUsernames = debounce((query,callback) => {
if (query.length > 2) {
console.log("fetching usernames for query",query);
axios
.get(`users/query/${query}`)
.then((response) => {
if (response.data)
return response.data.map((u) => ({ id: u,display: u }));
else return [];
})
.then(callback);
}
},1000);
return (
<MentionsInput
value={message}
onChange={(e) => setMessage(e.target.value)}
>
<Mention
trigger="@"
data={fetchUsernames}
/>
</MentionsInput>
);
解决方法
您可以通过将 fetchUsernames
移到组件外来修复
更新:如果你想在组件中使用fetchUsernames
,可以像这样使用useCallback
。
const fetchUsernames = useCallback(
debounce((query,callback) => {
...
},1000),[]
);