如何在 React-Final-Form 中使用 debounce 和 initialValue？答案

【问题标题】：How can I use debounce with initialValue in React-Final-Form?如何在 React-Final-Form 中使用 debounce 和 initialValue？
【发布时间】：2021-06-03 19:10:22
【问题描述】：

我需要在输入onChange 上使用debounce，但我还需要来自表单initialValues 的值。在使用value={props.value} 添加去抖时，键入时文本框中没有任何反应，因为props.value 在去抖计时器之后得到更新。但是解决这个问题的方法是什么？

  const debounced = debounce(e => {
    input.onChange(e);
  }, 500);

  <FormControl
    value={input.value}
    onChange={e => {
      e.persist();
      debounced(e);
    }}
  />

在上述情况下，输入框中没有输入任何内容。如果我不通过 value 属性，我不会在输入框中自动填充现有值。

希望获得有关如何实现这一目标的建议。

提前致谢！

【问题讨论】：

您为什么需要使用debounce？也许实际的解决方案是在其他地方（除了在组件中）使用去抖动。您是否在进行 API 调用？我猜正确的解决方案是去抖动 API 调用而不是输入事件。
不，我没有进行任何 API 调用，只是我有一个包含许多字段的表单，并且每次我输入内容时，FormSpy(React-final-form) 的 onChange 都会重新创建我的整个表单我的输入框。所以我试图通过在 onChange 处理程序上添加 debounce 来避免这种情况。
您在不使用 debounce 时是否看到任何逻辑错误或性能问题？
顺便说一下，如果您看到性能问题，那么您没有正确使用 final-form。最终形式的设计速度非常快-您可能只是在错误的地方使用了Spy。你应该从不需要debounce的最终形式。

标签： javascript reactjs react-final-form

【解决方案1】：

下面应该去抖动输入并相应地更新状态。

const { useState } = React;

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(null, args);
    }, wait);
  };
}

const App = () => {
  const [current, setCurrent] = useState('');
  
  const handleChange = debounce(e => setCurrent(e.target.value), 500);
  
  return (
    <div>
      <form>
        <input type="text" onChange={handleChange} />
        <p>{current}</p>
      </form>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：