我在函式中設定 lodash debounce 以發出 API 請求時遇到問題。出于某種原因，回呼不會發生，每次輸入時都會發送值。
import debounce from "lodash/debounce";
const handleChange = (event) => {
const { value: nextValue } = event.target;
const debouncedSave = debounce((nextValue) => dispatch(movieActions.getMovies(nextValue), 1000));
debouncedSave(nextValue);
};
我正在使用材料 ui 并以此作為回報：
<Autocomplete
onInputChange={handleChange}
/>
uj5u.com熱心網友回復：
您的去抖動函式為每個更改事件創建了多次，這會導致問題。我將使用一個簡單的例子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} />;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338455.html
標籤：javascript 反应 打回来 洛达什 去抖动
上一篇：它的回傳型別'void|Element'不是有效的JSX元素。型別'void'不能分配給型別'Element|空值'
下一篇：Material-UI：WithStyles(ForwardRef(Dialog))中未實作提供給classes道具的關鍵`paperFullWidth`