Lodash Debounce 发送没有回调的请求 React JS
Lodash Debounce sends request without callback React JS
我在函数中设置 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);
};
我正在使用 material ui 并且在 return 中有这个:
<Autocomplete
onInputChange={handleChange}
/>
您的去抖动函数针对每个更改事件创建了多次,这导致了问题。我将使用一个简单的示例 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} />;
}
否则,如果您想在组件中保留去抖动的函数声明,您可以使用 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} />;
}
我在函数中设置 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);
};
我正在使用 material ui 并且在 return 中有这个:
<Autocomplete
onInputChange={handleChange}
/>
您的去抖动函数针对每个更改事件创建了多次,这导致了问题。我将使用一个简单的示例 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} />;
}
否则,如果您想在组件中保留去抖动的函数声明,您可以使用 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} />;
}