如何去抖動最終形式的字段？

Question

這是一個很常見的查詢，但我對新的final-form庫有點困惑。 我曾經使用redux-form但這個新版本太不一樣了。

我的需求很簡單，我想在用戶寫一些文本時分派搜索，但我想在字段中添加一個throttle 。

這是 lib react-final-form-listeners的第一次嘗試，但正如您將看到的，當您在文本字段中寫入時，去抖動不起作用：/

https://codesandbox.io/embed/react-final-form-simple-example-khkof

Answer 1

首先，我鼓勵您在不使用模糊包層的情況下完成所有這些操作。 這將幫助您真正理解流程，但是，當輸入更改時，您可以通過以下方式調用函數：

• 去抖動（僅在用戶停止輸入 500 毫秒時執行一次）
• 節流閥（批處理然后每 500 毫秒執行一次）
• 正常（在每次輸入更新時執行）

在這種情況下，我只是在渲染方法之外創建了一個去抖動函數。 當使用類而不是鈎子時，這會有所不同：

掛鈎：

const handleSearch = debounce(searchText => { ... }, 500);

類（或者您可以在constructor對類字段進行去抖動，兩者都可以）：

class Example extends Component {
  handleSearch = debounce(searchText => { ... }, 500)

  render = () => { ... }
}

工作示例（在打開代碼沙盒控制台時鍵入）：

---

去抖動、節流和正常執行之間的區別：

---

同上，減去react-final-form和react-final-form-listeners （項目中少了兩個依賴項！）：

工作示例（在打開代碼沙盒控制台時鍵入）：

---

Answer 2

您的解決方案存在多個問題：

• 使用lodash debounce ，而不是throttle 。
• 在表單之外創建去抖動函數，以防止在每次重新渲染或更改時重新分配
• 調用表單提交操作，而不是提交處理程序handleSubmit

修改並運行您的示例：

Answer 3

這是一個記憶的去抖版本：

function MemoizedDebouncedValidationField({
  milliseconds = 400,
  validate,
  ...props
}) {
  const timeout = useRef(null);
  const lastValue = useRef(null);
  const lastResult = useRef(null);

  const debounceValidation = (value, values, meta) => new Promise((resolve) => {
    if (timeout) {
      clearTimeout(timeout.current);
    }
    if (value !== lastValue.current) {
      timeout.current = setTimeout(() => {
        lastValue.current = value;
        lastResult.current = validate(value, values, meta);
        resolve(lastResult.current);
      }, milliseconds);
    } else {
      resolve(lastResult.current);
    }
  });

  return <Field validate={debounceValidation} {...props} />;
}

用法：

<MemoizedDebouncedValidationField
  name="username"
  validate={(value) => (value === 'jim' ? 'Username exists' : undefined)}
  render={({ input, meta }) => (
    <>
      <input {...input} />
      {(meta.touched && meta.error) && <p>Error</p>}
    </>
  )}
/>