添加 debounce 到反应钩子形式

Question

我使用react-hook-forms 设置了以下受控组件。

          <Controller
            control={control}
            name={"test"}
            render={({ field: { onChange, value, name } }) => (
              <Dropdown
                name={name}
                value={value}
                handleChange={onChange}
                options={foodCategories()}
              />
            )}
          />

我想调用防抖功能，并且尝试执行以下操作：

            handleChange={debounce(onChange, 500)}

但我不断收到错误抛出：

This synthetic event is reused for performance reasons, Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, 

如何在受控反应钩子表单组件上调用去抖？

Answer 1

这可以通过以下实现来实现；

<Controller
   name={fieldName}
   rules={{ required: `errors.${fieldName}.required` }}
   render={({ field, fieldState: { error } }) => (
      <input
         type="text"
         error={error && t(`${error.message}`)}
         onChange={debounce((e) => field.onChange(e), 50)}
         defaultValue={field.value}
       />
    )}
  />