我正在尝试在一个由输入 onChange 事件调用的搜索函数中使用 lodash 实现防抖动。下面的代码生成了一个类型错误“预期为函数”,我理解这是因为 lodash 正在期望一个函数。正确的做法是什么,能否在一行内完成?我已经尝试了 SO 上迄今为止的几乎每个示例,但都没有成功。
search(e){
let str = e.target.value;
debounce(this.props.relay.setVariables({ query: str }), 500);
},
我正在尝试在一个由输入 onChange 事件调用的搜索函数中使用 lodash 实现防抖动。下面的代码生成了一个类型错误“预期为函数”,我理解这是因为 lodash 正在期望一个函数。正确的做法是什么,能否在一行内完成?我已经尝试了 SO 上迄今为止的几乎每个示例,但都没有成功。
search(e){
let str = e.target.value;
debounce(this.props.relay.setVariables({ query: str }), 500);
},
useCallback
。useCallback
会将你的防抖函数进行记忆化,这样当组件重新渲染时就不会一次又一次地重新创建防抖函数。如果没有使用useCallback
,防抖函数将无法与下一个按键同步。import {useCallback} from 'react';
import _debounce from 'lodash/debounce';
import axios from 'axios';
function Input() {
const [value, setValue] = useState('');
const debounceFn = useCallback(_debounce(handleDebounceFn, 1000), []);
function handleDebounceFn(inputValue) {
axios.post('/endpoint', {
value: inputValue,
}).then((res) => {
console.log(res.data);
});
}
function handleChange (event) {
setValue(event.target.value);
debounceFn(event.target.value);
};
return <input value={value} onChange={handleChange} />
}
useCallback
会将所有使用useState
的变量设置为页面加载时的初始值。我遇到了这个错误,现在正在尝试找到另一种使用防抖器的方法。 - Fiddle Freak防抖函数可以在JSX中内联传递,也可以直接设置为类方法,如下所示:
search: _.debounce(function(e) {
console.log('Debounced Event:', e);
}, 1000)
小提琴(Fiddle):https://jsfiddle.net/woodenconsulting/69z2wepo/36453/
如果您使用es2015+,您可以在constructor
或生命周期方法(例如componentWillMount
)中直接定义您的防抖函数。
示例:
class DebounceSamples extends React.Component {
constructor(props) {
super(props);
// Method defined in constructor, alternatively could be in another lifecycle method
// like componentWillMount
this.search = _.debounce(e => {
console.log('Debounced Event:', e);
}, 1000);
}
// Define the method directly in your class
search = _.debounce((e) => {
console.log('Debounced Event:', e);
}, 1000)
}
const MyComponent = (props) => {
const [reload, setReload] = useState(false);
useEffect(() => {
if(reload) { /* Call API here */ }
}, [reload]);
const callApi = () => { setReload(true) }; // You might be able to call API directly here, I haven't tried
const [debouncedCallApi] = useState(() => _.debounce(callApi, 1000));
function handleChange() {
debouncedCallApi();
}
return (<>
<input onChange={handleChange} />
</>);
}
改进这个答案:https://dev59.com/rFoV5IYBdhLWcg3wZOGe#67941248
使用 useCallback
和 debounce
已知会导致 eslint 发出 exhaustive deps
警告。
以下是如何在函数组件中使用 useMemo
实现:
import { useMemo } from 'react';
import { debounce } from 'lodash';
import axios from 'axios';
function Input() {
const [value, setValue] = useState('');
const debounceFn = useMemo(() => debounce(handleDebounceFn, 1000), []);
function handleDebounceFn(inputValue) {
axios.post('/endpoint', {
value: inputValue,
}).then((res) => {
console.log(res.data);
});
}
function handleChange (event) {
setValue(event.target.value);
debounceFn(event.target.value);
};
return <input value={value} onChange={handleChange} />
}
useMemo
来返回一个记忆化的值,其中这个值是由debounce
返回的函数。const [count, setCount] = useState(0); // simple check debounce is working
const handleChangeWithDebounce = _.debounce(async (e) => {
if (e.target.value && e.target.value.length > 4) {
// TODO: make API call here
setCount(count + 1);
console.log('the current count:', count)
}
}, 1000);
<input onChange={handleChangeWithDebounce}></input>
这并不是一个简单的问题。
一方面,为了解决你所遇到的错误,你需要将你的setVariables
封装在函数中:
search(e){
let str = e.target.value;
_.debounce(() => this.props.relay.setVariables({ query: str }), 500);
}
另一方面,我认为去抖逻辑必须封装在Relay内部。
const onScroll={(e) => {
debounceFn(e);
e.persist();
}}
const debounceFn = React.useCallback(
_.debounce((e) =>
calculatePagination(e),
500, {
trailing: true,
}
),
[]
);
useCallback
。这会强制所有的useState
钩子重置为页面加载时的初始状态。 - Fiddle Freak@Aximili
const [debouncedCallApi] = useState(() => _.debounce(callApi, 1000));
看起来有点奇怪 :) 我更喜欢使用useCallback
的解决方案:
const [searchFor, setSearchFor] = useState('');
const changeSearchFor = debounce(setSearchFor, 1000);
const handleChange = useCallback(changeSearchFor, []);
这是正确的FC方法 @
Aximili只会触发一次
import { SyntheticEvent } from "react"
export type WithOnChange<T = string> = {
onChange: (value: T) => void
}
export type WithValue<T = string> = {
value: T
}
// WithValue & WithOnChange
export type VandC<A = string> = WithValue<A> & WithOnChange<A>
export const inputValue = (e: SyntheticEvent<HTMLElement & { value: string }>): string => (e.target as HTMLElement & { value: string }).value
const MyComponent: FC<VandC<string>> = ({ onChange, value }) => {
const [reload, setReload] = useState(false)
const [state, setstate] = useState(value)
useEffect(() => {
if (reload) {
console.log('called api ')
onChange(state)
setReload(false)
}
}, [reload])
const callApi = () => {
setReload(true)
} // You might be able to call API directly here, I haven't tried
const [debouncedCallApi] = useState(() => _.debounce(callApi, 1000))
function handleChange(x:string) {
setstate(x)
debouncedCallApi()
}
return (<>
<input
value={state} onChange={_.flow(inputValue, handleChange)} />
</>)
}
对于您的情况,应该是:
search = _.debounce((e){
let str = e.target.value;
this.props.relay.setVariables({ query: str });
}, 500),