在React中出现了未捕获的TypeError：path.split不是一个函数

Question

我正在尝试使用react对我的表单进行验证。我选择了“react-hook-form”库。但是我一直遇到错误“Path.split不是一个函数”。即使在他们网站上使用默认示例，我仍然会收到相同的错误信息。 这是官方网站上提供的默认代码。

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

- Pramod Kumar

---

你能分享一个最小化的 CodeSandbox，以便重现这个问题吗？ - Arun Kumar Mohan

嗨@ArunKumarMohan，这是链接"https://codesandbox.io/live/ljesmy8"。 - Pramod Kumar

看起来你分享的是一个会话URL而不是CodeSandbox URL。我刚刚在这里回答了一个类似的问题（https://dev59.com/0sDqa4cB1Zd3GeqPXCak#66927781），应该可以解决这个问题。将`ref={register}`替换为`{...register('example')}`。 - Arun Kumar Mohan

是的，它正在工作。谢谢@ArunKumarMohan。我没有看到迁移文档。 - Pramod Kumar

Answer 1

react-hook-form已经从6.X.X更新到7.0.0，并且有一些破坏性的更改:

您需要将所有的ref={register}替换为{...register('value_name')}

示例：

版本6.X.X：

<input ref={register({ required: true })} name="test" />

版本 7.0.X：

<input {...register('test', { required: true })} />

- Amit

---

你可以运行Codemon npx @hookform/codemod v7/update-register。 - Ethaan

@Ethaan，你如何使用yarn执行命令？ - Twirlman

@Twirlman，即使你在使用yarn，npx命令仍然可以正常工作。 - Brayden W

是的，正如@BraydenW所说，npx随npm 5.2+一起提供。 - Ethaan

假设我们有任何可重复使用的输入字段，那么我们如何将此注册传递给该可重复使用的函数？ - Prateek Pareek

@Ethaan需要在解决方案中添加codemon注释。可以大大节省时间。 - Pulkit Sethi

Answer 2

带有required和errors.message特性的简单输入，更新时需要进行必要的更改：

从版本6.x.x开始：

function MyComponent(props) {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (values) => {...};

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="message"
          autoComplete="off"
          ref={register({
            required: "Required",
          })}
        />
        {errors.message && errors.message.message}
        <input type="submit" />
      </form>
    </div>
  );
}

升级至版本 7.x.x：

function MyComponent(props) {
  const { register, handleSubmit, formState: { errors }} = useForm();

  const onSubmit = (values) => {...};

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="message"
          autoComplete="off"
          {...register("message", {
            required: "Required",
          })}
        />
        {errors.message && errors.message.message}
        <input type="submit" />
      </form>
    </div>
  );
}

除了注册修复外，如果您使用useForm（）的错误，则现在formState导出errors功能。

- Cássio Lacerda

Answer 3

值得一提的是，如果你使用的是material ui或类似的库，在那里ref={ref}会引发错误（因为它期望的是与ref不同的属性名称），你可能需要

import { TextField } from '@material-ui/core';


return (
 <TextField {...register('name')} />
)

这里有一个迁移指南，可以在这里找到，但还值得一提。

- Ethaan

Answer 4

如上所述，在v7中使用register的方式发生了变化。

如果仍然出现错误，请确保id实际上是一个string而不是其他类型，例如数字。

   <input {...register(id)} />

- Jobin Jacob Kavalam

Answer 5

import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();

return (
  <form onSubmit={handleSubmit(onSubmit)}>
   <input {...register("firstName", { required: true })} />
   {errors.firstName?.type === 'required' && "First name is required"}
  
   <input {...register("lastName", { required: true })} />
   {errors.lastName && "Last name is required"}
  
   <input type="submit" />
  </form>
 );
 }

- CodeAbsolute

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

这个程序出现了错误。 - Chirag Joshi