Getting Uncaught TypeError: path.split is not a function in react

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>
  );
}

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 })} />

Answer 2

值得一提的是，如果您正在使用 material ui 或类似的东西，其中 ref={ref} 会引发错误（因为它需要一个不同的 prop 名称而不是 ref），您可能需要至

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


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

这里有一个迁移指南here，但仍然值得一提

Answer 3

具有 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() 的错误，现在 errors 功能从 formState.

导出

Answer 4

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>
 );
 }

Answer 5

如上所述，register 在 v7

中的使用方式发生了变化

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

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