最佳答案
问题的根源在于 debounce
返回的函数不带任何参数,因此当您将 value
传递给 delayHandler
时它没有做任何事情。
这是一个工作示例:
const { useState } = React;
function debounce(fn, ms) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, ms);
};
}
function App() {
const [value, setValue] = useState("");
const handleChange = e => {
const { value } = e.target;
delayHandler(value);
};
const delayHandler = debounce(setValue, 2000);
return (
<div className="App">
<p>Current value: {value}</p>
<form>
<input onChange={handleChange} />
</form>
</div>
);
}
////////////////////////////////////////
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
关于javascript - 为什么我的去抖函数返回未定义的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63209852/