IT技术 - React 使用 debounce 和 setState - 吾爱随笔录

背景

假设我们都知道debounce来自的函数lodash。

如果用户快速输入1, 12, 123, 1234，它允许我们1234在一定的延迟时间后只进行一次警报，带有。

这非常用于减少请求量，用于优化。

描述

对于普通的输入字段，我们可以使用那种，debounce并且它可以工作。

问题：一旦我们setState在同一个回调中添加了debounce，debounce就无法正常工作。

有谁知道原因？

import React, { useState } from "react";
import "./styles.css";
import { debounce } from "lodash";

export default function App() {
  const [input, setInput] = useState("");

  const debouceRequest = debounce(value => {
    alert(`request: ${value}`);
  }, 1000);
  const onChange = e => {
    setInput(e.target.value); // Remove this line will lead to normal debounce
    debouceRequest(e.target.value);
  };

  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}

import React, { useState, useCallback } from "react"; import "./styles.css"; import { debounce } from "lodash"; const request = debounce(value => { alert(`request: ${value}`); }, 1000); export default function App() { const [input, setInput] = useState(""); const debouceRequest = useCallback(value => request(value), []); const onChange = e => { debouceRequest(e.target.value); setInput(e.target.value); // Remove this line will lead to normal denounce }; return ( <div className="App"> <input onChange={onChange} /> </div> ); }