当 React hook 依赖于来自 hook 的函数时,我应该先记住它吗?
我是一名经验丰富的程序员(10 年以上),但对 React 很陌生(< 2 years). I picked up React in a very "operational" way (i.e. being happy when things work without very deep understanding...
useForm 和react-hook-form 在我与NextJs 一起使用时出现问题
我正在 NextJs 中编码,我需要使用“useForm”,但它不断给出错误......“无法解析“react-hook-form”。”请帮忙。 从“反应”导入反应; 导入{使用...
如果 markdown frontmatter 中的值(对于博客文章)键:值对是特定字符串,则运行 git hook
我有一个 git hook 预提交,如果文件在我的 AstroPaper 博客中被修改,它会更新 modDatetime。 # 修改文件,更新modDatetime git diff --cached --name-status | git diff --cached --name-status | git diff --cached --name-status | egrep -i &q...
我正在使用 React-Hook-Form 实现动态表单的 Yup 验证。验证要求取决于 contentType 的值。如果 contentType 未定义或“博客文章”...
如何使用 yup 不允许在 React hook 中使用特殊字符和空格
代码如下: { 标签:“名称”, 名称:“名称”, 占位符:'名称', 类型:“文本”, 规则: yup.string() .required('姓名为必填项...
我正在创建一个身份验证表单,并且正在引用有关如何使用 yup 验证我的输入的react-hook-form 文档。据我所知,一切都与实施提供的几乎相同...
如何在react-hook-form中将数值注册为嵌套属性?
我有一个名为 Totals 的属性,它应该包含多个嵌套对象作为属性。 这是我想要的表单结构: { 总计:{ 0:{ 值:0, }, }, }; 然而...
即使使用了异步,我也无法更新useEffect中的数据。 注意:我不想在 useEffect 中添加数据作为依赖项,因为我只想获取一次数据 从“react&...
如何在react-hook-form中将数字值注册为嵌套属性
我有一个名为 Totals 的属性,它应该包含多个嵌套对象作为属性。 这是我想要的表单结构: { 总计:{ 0:{ 值:0, }, }, }; 然而...
我是 k8s 和 helm 的新手。我正在部署一个名为 zeebe 的开源分布式软件,它为 k8s 部署提供 helm 图表。我发现即使在执行 helm uninstall comm之后...
如何在next-cloudinary和react-hook-form中上传和存储多个图像而不是一张图像
k我有 shadcn/ui 表单组件,如下所示 “使用客户端”; 从“反应”导入{片段}; 从“下一页”导入类型 { NextPage } ; 从“n...
我正在尝试这样做,以便当我单击按钮时,我可以获得一个 html 字符串。 一般来说,这个富文本编辑器会在React-Hook-Form内部,当提交表单时,它会保存
是否应该将 setter 函数传递到 React hook 的依赖数组中?
最近我在同事的 React 代码中看到了一些将 setter 函数传递到钩子依赖数组中的示例,这对我来说看起来不太正确。例如: const MyComponent = () => { 反对...
如何在 Git-Bash 终端中读取用户输入并传递给 Python 脚本
在开始之前我只是想告诉大家我是Python的初学者:) 我正在通过 git bash 运行 python 脚本,同时提交代码更改(使用 git hook[commit-message]),我想阅读...
完整错误: 并非所有成分都是 'T | 类型((value: SetStateAction) => void)' 是可调用的。 “T”类型没有呼叫签名。 概括: 我正在尝试创建一个 useStateIfMounted c...
新闻: 在上面的答案之后,我可以再改变一点,但我仍然无法改变我需要的一切。现在最大的问题是: 如何删除操作(@hooked)的内容并将其放入新的hook中...
如何在 Redux Saga 中使用 React Hook?
我正在为我的应用程序设置语言。但我有一个问题。 我使用 React.useContext() 来设置语言。但是当我在 saga 的 toast 中修复它时,它会记录: [错误:无效的挂钩调用。 Hooks 只能在 ins 中调用...
我正在尝试在管理屏幕中的用户中显示 ACF 字段,并且我能够实现这一点。现在我想在正常的 WordPress 用户搜索中通过这个 ACF 字段搜索用户。有没有 Hook / 代码片段...
如果第一个钩子中的状态发生变化,第二个钩子中的useEffect是否会运行?
我有一个总体概念,我想知道这是否是一个好方法以及是否有效。假设我有两个钩子。 Hook #1 是 useClient,它有一个名为 range 的状态。我揭露这个...
为什么表单属性不能像 html 按钮字段那样在 MUI 按钮上工作?
我需要使用带有zod验证的react hook表单提交表单。但在我的情况下,提交按钮位于表单标记之外。所以我使用了id形式的方法。 (请调整任何其他方法...
react-hook-form useForm 每次在 Nextjs 页面路由上执行
嗨,我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 然而,似乎每次都会执行useForm,并且defaultValues是在页面路由中设置的(点击 嗨,我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 不过,好像每次都会执行useForm,并且在页面路由时设置defaultValues(点击<Link to=XX>)。 如何跨多个页面保存表单数据? 请帮助我。 这是我的代码。 _app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ); FormProvider.tsx export const FormProvider = ({ children, }: { children: React.ReactNode; }) => { const defaultValues: MyForm = { name: '', description: '' }; const form = useForm({ defaultValues, resolver: zodResolver(MyFormSchema), }); const onSubmit = () => console.log("something to do"); return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}>{children}</form> </Form> ); }; 您正在寻找的是跨多个页面维护的某种全局状态。对于这个例子,我将使用 React 的上下文 API,如果这不适合您的用例,您可以找到一些其他状态管理库。 首先,您需要创建一个全局上下文,并在表单提供程序中包含一个全局状态 // FormProvider.tsx import { createContext, useContext, useState } from 'react'; const FormContext = createContext(); // Exported to be used in other components export const useFormContext = () => useContext(FormContext); export const FormProvider = ({ children }) => { const [formData, setFormData] = useState({}); return ( <FormContext.Provider value={{ formData, setFormData }}> {children} </FormContext.Provider> ); }; 现在您需要用 FormProvider 包装您的应用程序 // You are already doing this part //_app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ) 现在你可以像这样使用它了。请记住,您将更新表单的全局状态,该状态将在您的所有页面上发生变化。 // In your form component import { useForm } from 'react-hook-form'; import { useFormContext } from '../path/to/formContext'; const MyFormComponent = () => { const { formData, setFormData } = useFormContext(); const { register, handleSubmit } = useForm({ defaultValues: formData, resolver: zodResolver(MyFormSchema), }); const onSubmit = (data) => { setFormData(data); // Handle form submission }; return ( <form onSubmit={handleSubmit(onSubmit)}> {/* Form fields */} </form> ); }; 您可以从其他页面访问数据的示例 // In another page or component import { useFormContext } from '../path/to/formContext'; const AnotherPage = () => { const { formData } = useFormContext(); // Use formData as needed };