'string' 类型的参数不能分配给 '`${string}` 类型的参数 | `${string}.${string}` | `${string}.${number}`'

Question

我已经react-hook-forms从 v.6迁移到 v.7。

更改register方法后，如迁移指南中所指出的，出现以下错误：

'string' 类型的参数不能分配给 ' ${string}|类型的参数 ${string}.${string}| ${string}.${number}'。TS2345

注册需要一个字符串名称，我正确地提供了一个参数，它肯定是一个字符串，但无论如何它不接受我的参数，如果我不完全传递字符串。

任何有类似问题或任何想法的人都受到高度赞赏。提前致谢！

Answer 1

register()在react-hook-formv7 中不接受字符串而是字符串文字。这是 的定义register：

export declare type UseFormRegister<TFieldValues extends FieldValues> = <
  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
  name: TFieldName,
  options?: RegisterOptions<TFieldValues, TFieldName>
) => RefCallbackHandler;

TFieldName是字面的联合。文字是特定的字段名称值。请参阅下面的示例：

interface IFormValues {
  firstName: string;
  lastName: string;
}

const { register, handleSubmit } = useForm<IFormValues>();
const firstNameId = 'firstName'; // string literal
const lastNameId: string = 'lastName'; // string

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    // this works because first argument is 'firstName' | 'lastName'
    <input {...register(firstNameId)} />
    // this does not work because it's just a string instead of one of the
    // two literal values
    <input {...register(lastNameId)} />
    <input type="submit" />
  </form>
);

解决方案

官方示例中提出的解决方案对我来说有点冗长，但它现在有效。

您需要将寄存器名称转换为文字：

<input key={field.id} {...register(`test.${index}.test` as const)}  />

但是，如果index是数字，则上述解决方案不起作用。当您将文字与如下数字混合时：

`test.${index}.test`

因为index可以是任何数字，所以打字稿无法将其转换为精确值。文档中提出的解决方法是手动转换为文字：

{...register(`test.${index}.test` as `test.0.test`)}