时间戳

首页 > 解决方案 > 包装 React Hook 返回值会导致渲染循环

reactjs - 包装 React Hook 返回值会导致渲染循环

问题描述

我正在使用https://react-hook-form.com/api/在一个 React 功能组件中的某些表单控件上保存值并执行验证。我需要在用户在表单控件中输入的值更改后立即上传它们，因此我设计了一个简单的组件来覆盖setValueand ，registerFields如下所示：

export function wrapFormWithListeners(formsObject, options = {}) {
  /** @type {Object.<string, Observable>} */
  let changes = {};
  /** @type {Object.<string, Subject>} */
  let changeEmitters = {};
  let registrationsSubject = new ReplaySubject();

  return {
    ...formsObject,
    register: createRegisterProxy(
      formsObject.register,
      changes,
      changeEmitters,
      registrationsSubject,
      options
    ),
    setValue: createSetValueProxy(formsObject.setValue, changeEmitters),
    changes,
    registrations: registrationsSubject
  };
}

我在我的功能组件上无条件地调用该包装函数，如下所示：

function MyComponent({ prop }) {
  const form = useForm();
  const modifiedForm = wrapFormWithListeners(form);
  const {
    register,
    errors,
    getValues,
    setValue,
    triggerValidation,
    clearError,
    reset
  } = modifiedForm;
}

我的问题是，每当我解构modifiedForm对象时，React 就会开始一遍又一遍地循环渲染。我知道这不是我的组件的问题，因为它不使用任何 React API 调用，并且在wrapFormWithListeners不访问返回对象中的任何成员的情况下调用该函数会使渲染工作正常；换句话说，这使得组件工作，虽然我失去了上传功能：

function MyComponent({ prop }) {
  const form = useForm();
  const modifiedForm = wrapFormWithListeners(form);
  const {
    register,
    errors,
    getValues,
    setValue,
    triggerValidation,
    clearError,
    reset
  } = form;
}

关于 React 如何将我的功能理解为用户钩子之类的东西，我有什么遗漏吗？

我在用"react": "^16.12.0"

标签： reactjs

解决方案

推荐阅读