尝试使用 _.debounce(fn, wait);
时调用 apollo 客户端 useLazyQuery(...)
调用它第一次去抖动查询,然后调用查询函数,但之后它会在每次更改时继续调用查询而没有任何去抖动。
但是,如果我使用 console.log(...)
而不是 useLazyQuery(...)
调用它会完美地工作。
第一次工作,然后立即调用该函数而没有任何反跳:
const [value, setValue] = useState('');
const [search, { loading, data }] = useLazyQuery(SEARCH_QUERY, { variables: { searchString: value } });
const debouncer = React.useCallback(_.debounce(search, 1500), []);
...
<call to debouncer() with onChange event>
每次都能完美运行:const [value, setValue] = useState('');
const [search, { loading, data }] = useLazyQuery(SEARCH_QUERY, { variables: { searchString: value } });
const debouncer = React.useCallback(_.debounce(val => (console.log(val)), 1500), []);
...
<call to debouncer() with onChange event>
最佳答案
对于这个问题,你甚至不需要状态;简化版:
import { useCallback } from 'react';
import { useLazyQuery } from '@apollo/client';
import _ from 'lodash';
function App() {
const [search, { loading, data }] = useLazyQuery(SEARCH_QUERY);
const debouncer = useCallback(_.debounce(search, 1000), []);
return (
<input
type='text'
onChange={e => debouncer({ variables: { code: e.target.value } })}
/>
);
}
关于javascript - Lodash Debounce 和 Apollo Client 使用LazyQuery 去抖动一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69482390/