获取未捕获的类型错误: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 ) />
【讨论】:
你可以运行codemonnpx @hookform/codemod v7/update-register
@Ethaan 如何用 yarn 执行命令?
@Twirlman npx
命令仍然可以工作,即使你使用的是纱线。
是的,正如@BraydenW 所说,npx
与 npm 5.2+
一起出现
假设我们有任何可重用的输入字段,我们将如何将此寄存器传递给该可重用函数【参考方案2】:
值得一提的是,如果您使用 material ui
或类似的东西,其中 ref=ref
会引发错误(因为它需要不同的道具名称而不是 ref
),您可能想要
import TextField from '@material-ui/core';
return (
<TextField ...regsiter('name') />
)
这个here 有一个迁移指南,但仍然值得一提
【讨论】:
【参考方案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
导出。
【讨论】:
【参考方案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 客户端库时不是一个函数
未捕获的类型错误:$(...).datepick 不是 asp.net 中 jQuery datetime 中的函数