我正在使用带有Typescript的React Hook表单，字符串不接受传入数据
在使用带有TypeScript的React Hook Form时，如果字符串类型不接受传入数据，可能是由于以下几个原因造成的：
基础概念
React Hook Form 是一个用于管理表单状态的库，它提供了高性能和灵活性的表单管理方案。TypeScript 是一种静态类型检查的编程语言，它可以帮助开发者在编译阶段发现类型错误。
可能的原因及解决方法
1. 类型定义不正确
确保你的表单字段类型定义正确。例如，如果你有一个字符串类型的输入框，你的定义应该像这样：
import { useForm } from 'react-hook-form';
type FormData = {
name: string;
};
const MyForm = () => {
const { register, handleSubmit } = useForm<FormData>();
const onSubmit = (data: FormData) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name', { required: true })} />
<input type="submit" />
</form>
);
};2. 默认值类型不匹配
如果你为表单字段设置了默认值，确保默认值的类型与字段类型匹配。
const defaultValues: FormData = {
name: '' as string, // 确保类型匹配
};3. 自定义验证规则
如果你使用了自定义验证规则，确保这些规则没有错误地拒绝字符串类型的输入。
{...register('name', { required: true, pattern: /^[A-Za-z]+$/ })} // 示例正则表达式4. 表单提交处理
确保在表单提交处理函数中正确地访问和处理数据。
const onSubmit = (data: FormData) => {
if (data.name) {
console.log('Submitted name:', data.name);
}
};应用场景
React Hook Form 适用于需要管理复杂表单状态的场景，尤其是在需要高性能和响应式更新的Web应用中。它特别适合与TypeScript一起使用，因为TypeScript的类型系统可以帮助你在早期发现潜在的错误。
参考链接
如果你遵循了上述步骤，但问题仍然存在，请检查控制台是否有任何错误信息，并确保你的React和React Hook Form版本是最新的。如果问题依旧无法解决，可能需要更详细的错误信息或代码示例来进行进一步的诊断。
相关·内容
我有一个TypeScript、React/next.js应用程序。我正在尝试为验证设置react钩子表单。我从react表单导入了useForm和SubmitHandler，创建了一个接口，并创建了一个函数。
import {useForm, SubmitHandler} from 'react-hook-form';
interface Inputs {
firstName: string;
lastName: string;
email: string;
phoneNumber: string;
export const ContactForm = (): JSX.El
浏览 13提问于2022-04-21得票数 0
我已经使用MUI和React Hook Form在React中构建了一个表单。我正在尝试创建自定义 TextField 元素，该元素用作 选择输入 ..。我希望它是一个不受控制的组件，带有 参考 道具。我试着通过MUI和React Hook Form文档推荐的inputRef属性，但没有成功。 Choose one option
03
06
09
12
16
18 我发现的一件事是，如果我使用本机 选择 使用 参考 ，它
浏览 76提问于2020-08-04得票数 17
回答已采纳
我想使用react-hotkeys hook中的useHotKeys提交一个带有react-hook-form的表单 我已经附加了一个代码沙箱来尝试这个。我想要在单击热键和单击提交按钮时提交表单。这可以做到吗？ https://codesandbox.io/s/react-hoot-form-usehotkeys-009rk?file=/src/App.js
浏览 50提问于2021-04-21得票数 0
回答已采纳
2回答
反应高阶函数返回钩子
、、、、
目前，我有一个用javascript编写的自定义抓取数据钩子，它可以正常工作
import {useState, useEffect} from 'react';
const useApi = apiName => id => {
const [response, setResponse] = useState();
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const fetching = async () =&
浏览 2提问于2020-05-07得票数 1
2回答
如何使用react表单验证数组？
、、、、
我正在根据selectedAddress中可用的字段来呈现一个表单。key变量都是唯一的，但我看到的是一个each child in a list must have a unique key error，验证不起作用。我遗漏了什么？
import { useForm } from "react-hook-form";
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const RenderSelectedAddress = () => {
if (select
浏览 1提问于2021-10-27得票数 1
回答已采纳
1回答
我正在开发一个使用Next.js版本的12.1.5应用程序，我遇到了一个非常疯狂的错误。每个输入组件在每次击键时都会导致完全的重呈现，导致输入的焦点丢失。这适用于input、textarea，甚至@monaco-editor/react包。我在Formik表单中也有同样的问题，奇怪的是，我能够通过切换到react-hook-form来解决这个问题。但是，我仍然在接受击键的所有组件上看到它。
我试着将组件的值状态移到树上，尝试将本地的状态放到组件上，但我完全没有运气。这就是我的input组件的样子：
Input.tsx
import { forwardRef, InputHTMLAttribut
浏览 17提问于2022-04-26得票数 0
回答已采纳
1回答
我一直在使用带有本机元素的react钩子形式库，但我想切换到使用Controller API的自定义组件。 我的自定义输入组件在更新React状态但不更新form状态内的ref时遇到问题。因此，必填字段始终标记为无效，并且我无法提交表单。 这是我的问题的一个演示：https://codesandbox.io/s/react-hook-form-controller-bofv5 它应该在提交时注销表单数据-但提交从不发生，因为表单无效。
浏览 11提问于2020-04-29得票数 3
回答已采纳
我正在使用react-hook-form，我想在一个额外的组件中包含表单的某些部分。因此，我需要传递一些方法。register, control, setValue, watch方法的正确typescript types是什么？ Example Sandbox interface INameInput {
register: any;
setValue: any;
watch: any;
control: any;
}
const NameInput: React.FC<INameInput> = (props: INameInput) => {
co
浏览 18提问于2020-12-07得票数 2
回答已采纳
我正在尝试将一个react项目从javascript转换为TypeScript。项目是使用CRA --typescript创建的。我在其中使用了redux-saga。我没有编译错误，但我面临一个运行时错误。 我已经检查了this question和其他几个，我认为我没有违反上面提到的规则。 import { IEventDto } from "dtos/event";
import React, { Dispatch, memo, useEffect } from "react";
import { connect } from "react-redu
浏览 25提问于2019-12-06得票数 1
回答已采纳
我很难找到正确的方法来使用React Hook Form和某些重要的UI组件。我可以让它与简单的文本字段一起工作，但当涉及到嵌套组件时，我就搞不懂了。 具体地说，我尝试在带有子MenuItems的Select组件中提交选择中的数据。 请参阅代码中的注释： export default function NewGoalPane() {
const classes = useStyles();
const {register, handleSubmit} = useForm();
return (
<div className={classes.root}>
<
浏览 17提问于2020-09-21得票数 1
根据文档(https://react-hook-form.com/get-started#IntegratingControlledInputs)，我正在尝试使用Controller包装器组件在React Hook窗体中包装React Select <Controller
name="ShiftCaptain"
control={control}
render={({ field }) => (
<Select
浏览 25提问于2021-10-12得票数 0
回答已采纳
我正在使用带有React的Typescript，目前正面临这个问题 ?
浏览 25提问于2019-04-19得票数 3
回答已采纳
2回答
我有一个 and表单，当我按下提交按钮时，就可以在onFinish function中获取表单数据，在该按钮中，我希望使用uesEffect hook，并将表单数据作为有效负载分派到redux中，但我得到了以下错误
React Hook "useEffect" is called in function "onFinish" that is neither a React function component nor a custom React Hook function.
如果我在onFinsh 函数之外编写useEffect钩子，则无法获得表单数据/值。
浏览 6提问于2021-01-20得票数 1
回答已采纳
我正在使用typescript构建一个带有nextjs和chakra UI的web应用程序。我使用react钩子表单进行表单验证，但是当我在vercel上部署它时，它导致了一个问题。查看图像以查看错误消息。 ?
浏览 7提问于2021-04-07得票数 1
我写的下一个项目是关于类型的。在那里，我有一个表单，输出4个值后的表单提交。但是，只有带有控制器的输入发送一些值，其他输入返回未定义的值：
{title: undefined, description: undefined, rating: 4, name: undefined} //my console log
我的表格界面：
export interface IReviewForm {
name: string;
title: string;
description: string;
rating: number;
}
我的表格：
const { regis
浏览 5提问于2022-01-03得票数 1
回答已采纳
1回答
此正则方言不支持条件词。
、、、、
在我的类型记录文件中，我想使用包含条件表达式的正则表达式，但是我的IDE用条件表达式报告强调了RegEx的部分：“这个正则表达式不支持Conditionals”。如何启用支持条件正则表达式的方言？
export const phoneRegEx = /^\+?\d*\s?\(?(?(?<=\()\d+\)\s?\d+(-|\s|\.)?(?:\1?\d)*|(\.|\s|-)?(\2?\d)*)$/g;
我的package.json文件：
{
"private": true,
"scripts": {
"dev
浏览 2提问于2021-07-04得票数 3
回答已采纳
在添加react-hook-form以简单地验证表单之后，该字段变为只读。我做错了什么？这是一种网格化的形式。警报正在工作，但我无法写入或发送表单。我正在尝试理解react-hook-form是如何工作的。我必须更改表单的所有逻辑吗？react-hook-form能处理幕后的所有事情吗？ import React, { useState } from 'react'
import { navigate } from 'gatsby'
import { FormWrapper } from './ContactForm.styles'
//
浏览 9提问于2021-04-10得票数 0
回答已采纳
1回答
假设我有一个TypeScript 1.6文件，其中包含一个包含JSX (TSX)的一行：
var a = (<div></div>);
当我用TypeScript 1.6在命令行上编译它时(通过nypescriptnm包安装)：
ntsc --jsx react test.tsx
它产生预期的产出：
more test.js
var a = (React.createElement("div", null));
然而，当我尝试使用TypeScript JS做同样的事情时，我无法让它工作。我运行node，然后运行以下命令：
var ts = require
浏览 1提问于2015-08-07得票数 2
回答已采纳
我想做一个带有验证的表单，我使用了react-hook-form和Material UI。对于验证，yup和钩子/解析器也被使用。当我单击复选框时，我想显示另一个textField，但复选框不起作用。watch用于来自react-hook-form(useForm)的内容。我的错误是什么？求求你，救命。
这是我的代码：-
浏览 15提问于2021-06-17得票数 2
我正在尝试使用react-bootstrap创建一个Modal react-hook-form with fullscreen modal without form WORK 但是，当我添加表单时，Modal在全屏中不能正常工作。 react-hook-form with fullscreen modal with form NO WORK 我认为问题是在哪里找到表单，以便它在html中正确打印。 谢谢!
浏览 13提问于2021-09-07得票数 0
2回答
我没有在TypeScript中使用React Hook，但我有几行代码，如下所示：
const [columns] = React.useState<Column[]>([
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate'
浏览 14提问于2020-05-20得票数 0
回答已采纳
我正在尝试将react-hook-form与我的自定义日期选择器一起使用，但我只看到这个示例()，它使用默认的react-date-picker。
但是，它只适用于原始的反应日期选择器。我用我的自定义日期选择器尝试了同样的方法，但它不起作用……
这是我自定义的日期选择器：
import React, { useState } from 'react';
import ReactDatePicker from 'react-datepicker';
import tw from "date-fns/locale/zh-TW";
import
浏览 33提问于2020-05-05得票数 1
回答已采纳
2回答
我正在尝试使用带有react-hook-form的antd form，但是不能让它工作。 基本上，我使用的是一个带有antd的主题，并希望集成react-hook-form以更好地进行验证和其他事情。到目前为止，这是代码 import { Button, Form, Input, Message, Row, Tooltip } from "antd";
import { useForm, Controller } from "react-hook-form";
import {
EyeTwoTone,
MailTwoTone,
PlaySquare
浏览 27提问于2020-12-22得票数 3
我正在使用带有typescript的React15。下面是我的代码：
const WrappedComponent = (WrappedComponent: React.ComponentType<any>) => (<WrappedComponent className="my-class" />);
WrappedComponent(<div />);
我定义了一个接受任何react组件的WrappedComponent方法。然后，我调用传递了<div />元素的方法。但是我得到了下面的错误：
Argument of
浏览 32提问于2018-08-17得票数 1
我正在使用Typescript遵循Facebook react教程。然而，这是我第一次使用react和typescript。我想把一个onClick事件传递给'Square‘类，这个类使用typescript实现了一个状态和属性接口。
如何使这个Square类能够接受我的onClick事件并按预期触发它？正在与语法sugar作斗争。
import * as React from 'react';
interface MyProps {
value?: string;
}
interface MyState {
value?: string;
浏览 2提问于2017-03-27得票数 1
1回答
我正在尝试以一种只接受数字但在值后面添加任何单位度量(如kg，km，...etc)的方式来设置输入的样式。我不想使用span，因为单位度量将在用户开始键入时出现，并且在数字和单位度量之间有一个字母空格。为此，我使用了typescript和react-hook。
如果我们可以限制这些值，我会很感激，这样它就不会传递输入的宽度。还有一个带有Form.Control而不是输入的版本(以防我将来想用Forms做类似的事情)。
浏览 16提问于2021-06-02得票数 0
1回答
我们当前的项目结构包括一个使用Yup和TypeScript的表单验证。我们开始这样使用它：
// Used as a type in `useForm` from `react-hook-form`
export type MySlideSchemaType = {
questionField: string
}
// Used with `useForm` as a `resolver`
export const mySlideSchema: yup.SchemaOf<MySlideSchemaType> =
yup.object({
questionField
浏览 14提问于2021-10-18得票数 0
我想要一个使用react-hook-form的可重用、不受控制的输入组件，但我似乎无法正确地得到这些类型。
就像这样：
与示例一起使用。
Obs.:代码似乎运行得很好。我认为这只是一个调整类型的问题。
// REUSABLE UNCONTROLLED INPUT
interface NoteInputValue extends FieldValues {
note: string;
}
type NoteInputProps = {
register: UseFormRegister<NoteInputValue>;
};
const NoteInput: React
浏览 13提问于2022-06-01得票数 0
1回答
我正在学习React + Typescript，我面临着一个奇怪的问题。本质上，我定义了一个FunctionComponent
const AddLogModal: React.FC<{ addLog: Function }> = ({ addLog }) => {
const [message, setMessage] = useState('');
const [attention, setAttention] = useState(false);
const [tech, setTech] = useState(''
浏览 1提问于2020-10-15得票数 2
回答已采纳
我想用类型记录支持将Mock Service Worker包含到我的React项目中，但是一旦我运行npm安装msw -save-dev命令，我的终端就会向我显示这些错误消息：
PS F:\Programming\React Practices\ReactPizza\my-app> npm install msw --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: msw@0.41.0
npm ERR! Found: typescr
浏览 7提问于2022-05-27得票数 1
我正在尝试从Typescript中的一个功能创建一个<GeoJSON {...} /> react元素，但没有成功。(我使用的是react-leaflet + Typescript)对于常规的js，我只需要这样做：
<Map
{...}
<GeoJSON
data={...} <- Here I put my feature in JSON format
style={...} <- Associated style
/>
/>
但是在Typescript中，如果我尝试做完全相同的事情，
浏览 60提问于2020-02-22得票数 4
我正在使用react-hook-form，并试图将数据从表单传递给其父窗体。为此，我试图通过回调传递数据，但它不起作用。当我在父组件中console.log data时，我会得到未定义的信息。
父组件
import React from 'react';
import InputForm from './InputForm';
const App = (data) => {
const onFormSubmit = () => {
console.log(data.name);
};
return (
<div
浏览 3提问于2020-07-05得票数 4
回答已采纳
1回答
我正在尝试使用带有表单的输入类型文件。
import { Controller, useForm } from "react-hook-form";
import {
Button,
Form, FormText,
Label,
Input,
} from 'reactstrap';
const Test = () => {
const { handleSubmit, control, setValue, formState: { errors }} = useForm();
// I have other
浏览 0提问于2021-06-16得票数 1
我很难弄清楚如何根据来自另一个请求的响应向API发出请求。我正在向API发出请求，并从响应中提取IP地址。 然后，我想使用IP地址作为第二个API的输入，向另一个API发出另一个请求。当我尝试下面的代码时，我得到了错误React Hook "useSwr" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function 我使用的是React，TypeScript和SWR。我用一段简单的Java
浏览 120提问于2020-12-16得票数 3
我已经在这里查看了类似问题的解决方案，但它们似乎都处理预先存在的模块。这发生在我自己编写的React组件上，我不确定如何避免它。 import React from 'react';
import { useForm } from "react-hook-form"
import axios from 'axios'
export default FileUploadForm = () => {
const { register, handleSubmit, /* errors */ } = useForm()
con
浏览 50提问于2021-08-26得票数 0
Linting显示终端中的错误，但不会突出显示VS代码中的代码。安装了ESLint扩展。
运行nx lint
yarn run v1.22.10
$ nx lint
> nx run public:lint [existing outputs match the cache, left as is]
Linting "public"...
/Users/honzachalupa/Projects Repositories/- BrightWorks/darek-na-svatbu/packages/public/src/components/organisms/co
浏览 18提问于2021-12-19得票数 2
? 我在IDE的第16行(<行...)收到这个奇怪的typescript错误。将react es6 comp转换为typescript时。这是一个我使用react-chartjs-2的图表组件。 数据：{ label: string[]；datasets：{label: string；data: string[]；}[]；}；height: number；width: number；options：{ maintainAspectRatio: boolean；scales：{ yAxes：{ beginAtZero: boolean；}；}[]；}；legend：{ ...；}中缺
浏览 29提问于2021-05-04得票数 2
回答已采纳
我正在尝试使用带有Typescript的CRA来初始化我的带有Typescript的React项目。我在谷歌上搜索"create react app typescript"，两个提供商，wmonk和Microsoft，出现了他们自己的Github存储库。我用他们中的每一个创建了React应用程序，他们创建了相同的React项目架构。
这两个有什么不同？我应该坚持使用哪一个呢？
浏览 1提问于2018-11-25得票数 0
1回答
我正在用react-hook-form实现一个多步骤表单，我的问题是当我返回到上一页时，输入字段没有用表单数据重新初始化。
我使用来自react-hook-form的<FormProvider />组件将表单数据注入到页面中，并且我的input组件是使用来自useFormContext()钩子的register方法注册的
const CreateAccount = () => {
const [currentStep, setCurrentStep] = useState(0);
const methods = useForm<FormData>({
浏览 3提问于2021-07-21得票数 1
我正在使用带有typescript的react。我有一个在jsx中返回组件的函数： function TestComponent(str: string) {
return <span>Hello, your string was {str}</span>
} 假设函数是合理的(是吗？)，我如何在更多的jsx代码中调用它？ 我试过了： <TestComponent str="abcde" />
<TestComponent str={'abcde'} />
<TestComponent
浏览 37提问于2020-09-16得票数 1
回答已采纳
我正在尝试创建一个“react-hook-form”格式的验证器："^7.3.6“@typescript with @material-ui，用于输入字段中包含空格的情况；例如，用户可以输入”"/“username"/”username“，它将是一个有效的用户名。 我已经在pattern字段中尝试了几个正则表达式，但是没有找到我想要的那个，或者我没有以正确的方式来处理这个问题？ <TextField
variant="outlined"
margin="normal"
required
fullWi
浏览 12提问于2021-05-03得票数 0
我正在尝试理解react-hook-form是如何工作的。为此，我创建了以下示例： import React from 'react';
import { useForm } from 'react-hook-form';
const InputForm = () => {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<>
浏览 32提问于2020-07-05得票数 5
回答已采纳
1回答
我试图使用的react-components从用户的webId中加载用户的配置文件。我遇到了useLDflex()的问题。问题似乎与React有关，但我无法解决。我的目标是在页面加载时加载用户的配置文件；可以进行任何必要的更改。我正在使用MobX进行状态更改。
下面是代码，下面是编译器/web浏览器中的错误。谢谢。
代码(JSX/JSX/TypeScript)：
import React from 'react'; // 16.14.0
import { observer } from 'mobx-react';
import {
浏览 1提问于2021-03-02得票数 0
回答已采纳
我使用lib React Hook表单作为带有复选框输入的表单。我不明白这段代码有什么问题。这段代码重新呈现一个带有依赖项的useEffect。当仅尝试呈现单个复选框输入时，不会验证此行为。有人有一个想法，使用一个地图函数来渲染多个输入，而不需要重新渲染？
我用下面的代码创建了一个沙箱
浏览 8提问于2021-02-23得票数 1
我在我的应用程序中使用了react-hook-form，并在react-hook-form中使用了autocomplete。 我的自动完成有像1988,1987,1986这样的下拉值，我想我不需要为这个自动完成使用onchange事件，当我从下拉列表中选择1988时，这个值通过react-hook-form传递，而不使用onchange事件。然而，当我从autocomplete中选择一个值并提交react-hook-form时，0被作为参数传递，而不是实际的值。 我知道我们可以使用onChange事件并将选定的下拉值设置为状态，但是我并不打算对表单变量进行任何状态管理，因为react-hoo
浏览 28提问于2021-07-31得票数 1
回答已采纳
为什么我们不能在有状态组件中使用钩子UseDispatch？
import { useDispatch } from "react-redux";
import { submitData } from "../state/actions";
class FormComponent extends Component {
constructor(props) {
super(props);
this.state = {
fields: {},
errors: {}
};
}
submitForm
浏览 7提问于2019-10-31得票数 0
回答已采纳
我有一个可重用的自定义输入组件，可以在Formik上下文中使用，也可以不使用(即在Formik表单中使用，也可以在Formik之外使用)。行为需要相应的不同。我需要确定这个组件中的模式。有一个名为useFormikContext()的钩子，如果它不适用，就会抛出一个错误。但当我做的时候
try {
const { values, setFieldValue } = useFormikContext();
}
catch (error) {
alert('NOT in the Formik Context');
}
finally {
alert (
浏览 6提问于2021-05-20得票数 2
回答已采纳
1回答
我正在开发一个Ionic React应用程序，我应该使用表单更新端点中的一些数据。打开表单时，必须显示输入的当前值。我面临选择输入的困难。当我打开表单时，在“标题”和“敬礼”上没有选择任何内容。
带有React表单的：
import {
IonContent,
IonPage,
IonItem,
IonLabel,
IonButton,
IonInput,
IonSelect,
IonSelectOption,
} from "@ionic/react";
import "../Home.css";
import React, {
浏览 3提问于2021-04-26得票数 0
回答已采纳
我正在尝试在react原生中使用带有react-hook-form的动态字段。我最初尝试手动注册所有内容，但这不起作用。然后我尝试使用useFieldArray钩子，但是所有新创建的字段都不能正确注册。这是我的最新方法：
我有一个自定义组件来模拟react原生TextInput的web界面，并转发ref。
const Input = forwardRef((props, ref) => {
const {
onAdd,
...inputProps
} = props
return (
<View>
<TextInput
浏览 60提问于2020-05-23得票数 1
我想要有条件地禁用基于另一个输入值的输入。常见的用例是我们有一个复选框，我们需要禁用/启用同一表单中的另一个输入。我如何使用react-hook-form实现它？我想要禁用，而不是关于提交时的验证。 目前，我使用带有react-hook-form的FormControlLabel (material-ui)。任何帮助都将不胜感激。 更新！下面是我的想法的一小段演示代码 import { Controller, useForm } from "react-hook-form";
import { FormControlLabel, Checkbox } from "@m
浏览 36提问于2021-09-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
