debounce react-jsonschema-form 验证函数

Question

我有一个使用react-jsonschema-form 的功能组件，我需要对它运行的函数进行去抖动以验证自身。该组件看起来像这样：

const Form = props => {
  const validate = (formData, errors) => {
    // run some code to validate the form
    return errors
  }

  return (
    <SchemaForm
      validate={(formData, errors) => validate(formData, errors)}
    />
  )

我尝试了以下方法：

1. 将 validate 函数包装在 debounce 中：

const debouncedValidate = (formData, errors) => debounce(validate(formData, errors), 300);

return (
  <SchemaForm
    validate={(formData, errors) => validate(formData, errors)}
  />
)

1. ...尝试使用参考：

const debouncedValidate = useRef(debounce((formData, errors) => validate(formData, errors), 300);

return (
  <SchemaForm
    validate={(formData, errors) => debouncedValidate}
  />
)

1. ...尝试使用回调：

const debouncedValidate = useCallback(
  debounce((formData, errors) => validate(formData, errors), 300),
  [formData, errors]
);

return (
  <SchemaForm
    validate={(formData, errors) => debouncedValidate}
  />
)

1 导致TypeError: Expected a function。 Lodash 期待一个没有参数的函数，就像他们的文档所示：_.debounce(func, [wait=0], [options={}])。 2 和 3 都会导致 Uncaught ReferenceError: formData is not defined 错误。

任何有关如何解决此问题的建议将不胜感激。

Answer 1

试试这个：

const debouncedValidate =  _.debounce(validate, 300);


return (
  <SchemaForm
    validate={(formData, errors) => debouncedValidate(formData, errors)}
  />
)