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}
/>

您的去抖动函数针对每个更改事件创建了多次,这导致了问题。我将使用一个简单的示例 inputconsole.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} />;
}