Lodash Debounce发送请求时没有回调

Question

我在函数中设置lodash debounce以发出API请求时遇到问题。由于某些原因，回调没有发生，每次我键入时，值都会发送。

import debounce from "lodash/debounce";
const handleChange = (event) => {
const { value } = event.target;
const debouncedSave = debounce((nextValue) => dispatch(movieActions.getMovies(nextValue), 1000));
debouncedSave(value);
};

我使用的是材料ui，并有这个返回:

<Autocomplete
onInputChange={handleChange}
/>

Answer 1

为每个更改事件创建了多次debdebsed函数，这导致了问题。我将使用一个简单的input和console.log的简化示例，而不是您的dispatch，但您也可以将解决方案应用于您的情况。

最简单的解决方案是将debouncedSave声明移出组件。

const debouncedSave = debounce((nextValue) => console.log(nextValue), 1000);
export default function App() {
const handleChange = (e) => {
const { value } = e.target;
debouncedSave(value);
};
return <input onChange={handleChange} />;
}

或者如果你想在你的组件中保留debdedfunction声明，你可以使用ref，每次创建和使用相同的实例，无论重新渲染:

export default function App() {
const debouncedSaveRef = useRef(
debounce((nextValue) => console.log(nextValue), 1000)
);
const handleChange = (e) => {
const { value } = e.target;
debouncedSaveRef.current(value);
};
return <input onChange={handleChange} />;
}