Lodash Debounce 发送没有回调的请求 React JS

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);
  };

我正在使用 material ui 并且在 return 中有这个：

<Autocomplete
  onInputChange={handleChange}
/>

Answer 1

您的去抖动函数针对每个更改事件创建了多次，这导致了问题。我将使用一个简单的示例 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 发送没有回调的请求 React JS

Lodash Debounce sends request without callback React JS

javascript

reactjs

callback

lodash

debounce