获取未捕获的类型错误:path.split 不是反应中的函数

Posted

技术标签:

【中文标题】获取未捕获的类型错误:path.split 不是反应中的函数【英文标题】:Getting Uncaught TypeError: path.split is not a function in react 【发布时间】:2021-06-29 18:46:08 【问题描述】:

我正在尝试对我的表单进行验证。我选择了“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>
  );

【问题讨论】:

你能分享一个最小的CodeSandbox 来重现这个问题吗? 嗨@ArunKumarMohan 这是链接“codesandbox.io/live/ljesmy8” 看起来您共享的是会话 URL 而不是 CodeSandbox URL。我刚刚回答了一个类似的问题here,应该可以解决这个问题。将ref=register 替换为...register('example') 是的,它的工作原理。谢谢@ArunKumarMohan。我没有看到迁移文档。 不客气。 【参考方案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 ) />

【讨论】:

你可以运行codemon npx @hookform/codemod v7/update-register @Ethaan 如何用 yarn 执行命令? @Twirlman npx 命令仍然可以工作,即使你使用的是纱线。 是的,正如@BraydenW 所说,npxnpm 5.2+ 一起出现 假设我们有任何可重用的输入字段,我们将如何将此寄存器传递给该可重用函数【参考方案2】:

值得一提的是,如果您使用 material ui 或类似的东西,其中 ref=ref 会引发错误(因为它需要不同的道具名称而不是 ref),您可能想要

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


return (
 <TextField ...regsiter('name') />
)

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

【讨论】:

【参考方案3】:

具有requirederrors.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 导出。

【讨论】:

【参考方案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>
 );
 

【讨论】:

正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于获取未捕获的类型错误:path.split 不是反应中的函数的主要内容,如果未能解决你的问题,请参考以下文章

获取未捕获的类型错误:fs.readdirSync 在使用 Browserify 和 Nutritionix NodeJS 客户端库时不是一个函数

未捕获的类型错误:googleAuth.then 不是函数

未捕获的类型错误:$(...).datepick 不是 asp.net 中 jQuery datetime 中的函数

获取 TypeError:path.split 不是 Mongoose 中的函数

未捕获的类型错误未定义不是函数

未捕获的类型错误:$ 不是函数 [重复]