javascript - 为什么我的去抖函数返回未定义的值?

标签 javascript reactjs

这是我的 example :

问题是输入值应该在 2 秒内显示,但事实并非如此。 我尝试调试该值,但它是未定义的,但我不明白为什么。

感谢任何帮助。

最佳答案

问题的根源在于 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/

相关文章:

javascript - 来自另一个文件的 react 设置状态

javascript - 如何使用 css-in-js 在悬停另一个元素时显示 div 元素?

reactjs - 在 JSX 中使用Memo 是否安全?

reactjs - 在 Next.js 应用程序中生成动态/robots.txt 文件

javascript - 显示 chop 字符串的显示值

javascript - JavaScript 中的生命游戏 - 使用 Table

javascript - ES6 : Is it dangerous to delete elements from Set/Map during Set/Map iteration?

javascript - 使用 Fancybox 显示 div

reactjs - 如何更改 Material UI 中的选项卡宽度

javascript - 在父状态更改后强制在 React 上重新渲染 D3 组件