typescript 中的 react-hook-form v7 `watch` 类型？

Question

我对如何将watch的类型声明为道具感到困惑。 这是一个例子：

// pages/FormContainer.tsx

import { useForm, useWatch } from "react-hook-form";
import FormView from "./FormView";

interface FormInputs {
  firstName: string;
  lastName: string;
  age: number;
}

const FormContainer = () => {
  const { control, register } = useForm<FormInputs>({
    defaultValues: {
      firstName: "Jon",
      lastName: "Doe",
      age: 24
    }
  });
  const formData = useWatch({ control });

  return <FormView register={register} formData={formData} />;
};

export default FormContainer;

// pages/FormView.tsx

import { UseFormReturn } from "react-hook-form";

interface Props {
  register: UseFormReturn["register"];
  formData: UseFormReturn["watch"];
}

const FormView = ({ formData }: Props) => {
  return (
    <div>
      <h1>
        My Name: {formData.firstName} {formData.lastName}
      </h1>
      <h2>I am {formData.age} years old</h2>
    </div>
  );
};

export default FormView;

事情是 typescript 在这个formData={formData}道具上显示一个错误

在这里，我提供了一个沙箱来明确我的意思

Answer 1

UseFormReturn["watch"]将返回watch function 本身的类型 - 即此 function 的类型：

  // `watch` here is of type `UseFormReturn["watch"]
  const { control, register, watch } = useForm<FormInputs>({
    // ...
  });

作为参考，此watch function 的返回类型为UnpackNestedValues<TFormValues> 。

但是 - 你没有使用 function，你使用的是useWatch ，它返回一个略有不同的UnpackNestedValue<DeepPartialSkipArrayKey<TFieldValues>> 。 因此，您可以将表单类型更改为：

import { UnpackNestedValue, UseFormReturn, DeepPartialSkipArrayKey } from "react-hook-form";
import { FormInputs } from "./FormContainer";

interface Props {
  register: UseFormReturn["register"];
  formData: UnpackNestedValue<DeepPartialSkipArrayKey<FormInputs>>
}

或者，由于您的表单 object（至少在此示例中）非常“简单”（实际上只是键/值对），您可以使用更简单的Partial<FormInputs>类型声明，它在这种情况下功能等效。

这是为您更新的示例。

Answer 2

我发现了两件事可以改善和解决您的问题。

1. 使用从useForm返回的方法watch而不是useWatch来获取完整的表单数据。 您可以将useWatch用于单个表单输入更改，而不会影响根组件的呈现。

// Empty watch function will return the full form data.
const formData = watch()

2. watch返回完整的表单数据，因此FormView组件中的 prop 将是FormInputs 。

interface Props {
  register: UseFormReturn["register"];
  formData: FormInputs;
}

这应该可以修复您的 TS 错误。