Javascript 使用debounce与setState进行反应 背景

假设我们都知道

lodash

中的

debounce

函数

如果用户快速输入

1

、

12

、

123

、

1234

，则在一定的延迟时间后，我们只能使用

1234

执行一次警报

这相当于用于减少请求量，以进行优化

---

描述 对于正常的输入字段，我们可以使用那种

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}来自“React”；
导入“/styles.css”；
从“lodash”导入{debounce}；
导出默认函数App（）{
const[input，setInput]=useState（“”）；
const debouceRequest=debounce（值=>{
警报（`request:${value}`）；
}, 1000);
const onChange=e=>{
setInput（e.target.value）；//删除此行将导致正常的去抖动
DebouchereQuest（即目标值）；
};
返回(
);
}

试试这个（使用useCallback）：

import React，{useState，useCallback}来自“React”；
导入“/styles.css”；
从“lodash”导入{debounce}；
常数请求=去盎司（值=>{
警报（`request:${value}`）；
}, 1000);
导出默认函数App（）{
const[input，setInput]=useState（“”）；
const debouceRequest=useCallback（值=>request（值），[]）；
const onChange=e=>{
DebouchereQuest（即目标值）；
setInput（e.target.value）；//删除此行将导致正常退出
};
返回(
);
}

---

@keikai，你能帮个忙吗

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