假设我们都从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>
);
}
答案 0 :(得分:2)
尝试一下(使用useCallback):
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>
);
}