带有react-select formState的React-hook-form无效，但控制器未给出错误
问题描述： 带有react-select formState的React-hook-form无效，但控制器未给出错误。
回答： React-hook-form是一个用于处理表单验证和状态管理的库。在使用React-hook-form时，如果带有react-select和formState，但控制器未给出错误，可能有以下几个可能的原因：
- 表单验证规则未正确设置：确保在使用React-hook-form时，已正确设置了表单验证规则。可以使用register方法为每个表单字段设置验证规则。例如，使用required规则来验证字段是否为空。
- 表单字段名称不匹配：确保react-select组件的name属性与控制器的name属性匹配。这样React-hook-form才能正确识别和处理该字段。
- 表单字段的ref未正确绑定：确保将react-select组件的ref属性绑定到控制器的ref属性上。这样React-hook-form才能正确引用和管理该字段的状态。
- 表单提交未触发：如果没有正确触发表单的提交操作，那么React-hook-form将无法执行表单验证和状态管理。确保在提交按钮或表单元素上绑定了handleSubmit方法，并在点击提交按钮时调用该方法。
如果以上解决方法都没有解决问题，可以尝试以下步骤：
- 检查React-hook-form的版本：确保使用的是最新版本的React-hook-form库，以确保获得最新的功能和修复的bug。
- 检查react-select的版本：确保使用的是与React-hook-form兼容的版本的react-select库。有时不同版本的库之间可能存在兼容性问题。
- 检查其他相关依赖项：检查项目中是否存在其他可能与React-hook-form或react-select冲突的依赖项。可以尝试升级或降级这些依赖项，以解决潜在的冲突问题。
总结： 在使用React-hook-form时，确保正确设置表单验证规则、字段名称匹配、ref绑定和正确触发表单提交操作。如果问题仍然存在，可以检查库的版本和其他相关依赖项，以解决潜在的兼容性或冲突问题。
相关·内容
我使用react-hook-form进行验证。如果formState.isValid为false，则禁用提交按钮。如果我没有选择一个选项formState.isValid is return false，它就会起作用。但是控制器不会给出错误。我怎样才能让它给出一个错误信息？以下是控制器代码
const { register, errors, formState, control } = useForm({
mode: "all"
});
function changeValue(inputValue) {
onChange({ key:
浏览 0提问于2021-02-23得票数 1
我想将泛型传递给我的自定义选择组件。我正在使用"react-hook-form": "^7.33.1",和"react-select": "^5.4.0"。
我把它命名为ReactSelect，它将control类型作为泛型。
export interface EditAuthorData {
name: string;
born: number;
}
...
<ReactSelect<EditAuthorData>
control={control}
name=
浏览 8提问于2022-08-18得票数 1
我使用react，选择https://www.npmjs.com/package/react-select和react-hook-form，这是我的代码：
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import Select from "react-select";
export function
浏览 2提问于2022-02-20得票数 0
1回答
我有一个由react-hook-form创建的表单，我有一个多选择字段，用户可以在其中选择多个字段。现在，如果用户不在列表中，我希望允许用户添加任何新选项：
我的代码：
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import Select from "react-select";
export fu
浏览 6提问于2022-02-26得票数 0
回答已采纳
当我使用react-hook-form时，我无法从react-hook-form中解析错误对象。 const { register, handleSubmit, reset, setValue, getValues, errors, formState } = useForm({
resolver: yupResolver(validationSchema)
});
浏览 96提问于2021-11-06得票数 3
由于我希望我的变体形式是动态的，所以我使用了来自react-hook-form的字段数组的概念。对于select字段，我使用react-select，它用于从用户获取特定选项的多个值。我就是这样做的
import React from "react";
import { useForm, useFieldArray } from "react-hook-form";
import ReactSelect from "./Select";
import Input from "./Input";
import VariationP
浏览 15提问于2022-08-12得票数 1
回答已采纳
我对react-hook-form有一个问题，简单地“触摸”一个字段(点击它，然后在其他地方点击)就会导致formState.isDirty为真。我已经在这个代码框中重现了这个问题： https://codesandbox.io/s/react-hook-form-dirty-by-touch-p8x6j 我从服务器加载一条记录并调用reset()，以便将其视为新的基线，这可能是导致问题的原因。但是，作为一个动态表单，我需要从服务器检索要加载到表单中的对象，所以我看不到解决这个问题的办法。我所希望的是，只要值没有实际改变，formState.isDirty就保持为假。 对于更复杂的组件(比如
浏览 8提问于2020-11-22得票数 0
回答已采纳
单击“重置”按钮时，我正在尝试重置窗体值。但是，当我重置表单时，除了时间选择器字段之外，表单字段的其余部分都会重置。
我使用控制器挂钩形式和多用户界面TimePicker。
import { useFormContext, Controller } from 'react-hook-form';
import { TimePicker } from '@mui/lab';
const dispatch = useDispatch();
const methods = useFormContext();
const { formState, watch, get
浏览 6提问于2022-01-26得票数 0
准备好迎接一个复杂的挑战了吗？
使用react-hook-forms和react-select使用creatable (用户动态创建多个输入)
我正在尝试实现一个表单，它使用4个单选按钮上的选项，其中2个显示多个输入(使用react-select的输入，其中用户可以创建多个条目，而不是下拉列表)，并试图在最终的useForm()对象中跟踪单选输入和多个输入。我还需要能够删除他们，如果用户改变主意或重置在一起的形式。现在，当我更改radioTwo并输入输入时，registrationTypes的键值会发生变化。我也不知道如何删除用户输入。我使用Controller来读取条目(尽管我听说如果使用原
浏览 8提问于2021-11-06得票数 0
我正在尝试实现来自react-hook-forms for react-select的react-select，但为了做到这一点，我需要使用来自react-hook-forms的Controller，但是当我使用Controller时，Select Component就会
TypeError: methods is null
在useController.ts上(它是包控制器文件本身)
我不知道我为什么要得到这个，在这一点上，我希望在解决这个问题上提供一些帮助。我花了几个小时调试、更改和寻找替代解决方案，但没有任何效果。
我的react-select component代码
import Pr
浏览 7提问于2022-02-08得票数 1
回答已采纳
我在一个react-hook-form中使用了create select组件。我尝试了react-select和creatable-react-select两者，我在这个问题的上下文中体验到的行为是相同的。
使用最新的react-hook-form (7.6.1)，当有错误绑定到字段时，我不能将字段设置为焦点。
当我使用一个老版本的react-hook-form时，我可以让这个行为像预期的那样工作。
因为我想让这个行为在最新的react-hook-form中工作，对于第一个例子中的问题有什么建议吗？
浏览 3提问于2021-05-19得票数 0
回答已采纳
我有一个简单的形式与一个单一的材料UI TextField内反应钩形式。我使用Yup模式验证(通过yupResolver)。我试图验证表单并直观地显示错误(TextField中的布尔支柱'error‘)。我使用控制器与‘呈现’道具，但它未能更新错误的TextField更改。有人知道我在这里做错了什么吗？
import React from "react";
import ReactDOM from "react-dom";
import { TextField } from "@material-ui/core";
import { C
浏览 0提问于2021-04-25得票数 3
回答已采纳
有没有关于如何让这三个库协同工作的文档？到目前为止，我只发现react-hook-form和react-select在一起，但没有yup验证。谢谢。
浏览 5提问于2021-10-02得票数 1
具有这样一个简单的react-hook-form示例表单：
import React from 'react';
import { useForm } from 'react-hook-form';
export default function ReactForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data) => console.log(data);
let
浏览 4提问于2022-03-15得票数 0
回答已采纳
2回答
具有这样简单的React (带有react-hook-form库)表单
import React, { useRef } from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
const firstNameRef1 = useRef(null);
const onSubmit = data
浏览 9提问于2022-03-22得票数 0
我使用react-hook-form和yup-validation。一个带有自定义名称的数组来自后端。验证对我不起作用。我在做什么
export const createValidationSchema = (arr) => {
const validationObject = {};
arr?.forEach(({name}) => {
validationObject[name] = string().required("Required field")
});
return object().shape({
editFiel
浏览 2提问于2022-05-23得票数 0
我在NextJs中编码，我需要使用'useForm‘，但是它总是会产生持续的错误.“无法解决‘反应-钩子形式’。”请帮助。
import React from "react";
import { useForm } from "react-hook-form";
function Presignup() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm;
const submitHandler = (i) => {
浏览 3提问于2022-04-05得票数 0
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
我正在尝试使用React、Formik、react-select和Firebase (云firestore)在react中构建表单。 当我只使用react-select一次时，一切都很好。只有一个状态需要更新。当我尝试使用多个下拉菜单时，我得到一个错误消息： Unhandled Rejection (FirebaseError): Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field fieldOfResearch) 我不知道这
浏览 22提问于2019-05-05得票数 3
我正在使用状态处理一个带有受控组件的表单，但我不知道如何允许我的yup表单模式工作。当组件不受控制时，它就像一种魅力。但是，当我尝试使用受控数据时，模式根本不起作用。
App.js的代码：
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup'
import * as Yup from 'yup';
im
浏览 3提问于2022-04-13得票数 0
在我自己的例子中，我正在努力实现一个带有material ui的react-select版本。文档中给出的示例非常复杂。
当我试图复制代码时，我得到了以下错误
ERROR in [at-loader] ./src/public/components/select.tsx:13:37
TS2307: Cannot find module 'react-select/lib/components/containers'.
用于以下依赖项。
import { ValueContainerProps } from "react-select/lib/components
浏览 0提问于2019-07-03得票数 0
我正在处理一个使用react-hook-form的表单，我需要一个可搜索的select，所以我使用react-select创建了一个组件。我的问题是，我在加载时传递了一个默认值，如果我使用trigger()来验证字段，我会在<Select>上得到一个无效的。此getValues()将提取正确的值。如果我在下拉列表中选择一个新值，它将起作用。只是不接受默认值.. 我创建了一个sandbox，如果有人有时间看一下的话？
浏览 43提问于2021-09-26得票数 2
我在使用新的react-hook-form版本7时遇到了验证错误的问题，我想知道是否有人可以帮助我(参见下面链接的示例)。 https://codesandbox.io/s/react-hook-form-adapting-existing-form-forked-n3sis?file=/src/index.js 在我从v6更新到v7之前，这一切都是有效的。我更改了register的使用方式，即{...register('name', {required: 'Add this'})}而不是ref={register({required: 'Add th
浏览 14提问于2021-04-09得票数 1
1回答
我正在尝试遵循Udemy上的代码，除了制作我自己版本的项目。在使用bcrypt和jwt之后，我无法在我的应用程序上发布任何帖子。我可以很好地登录，但当我试图发布一些东西时，我得到了一个422错误。
这就是让我陷入困境的原因。
const twottSubmitHandler = async (event) => {
event.preventDefault();
try {
const formData = new FormData();
formData.append("title", formState.inputs.ti
浏览 21提问于2020-05-29得票数 0
回答已采纳
1回答
我试图用yup在react钩子表单上编写错误处理，但是当我想像文档说明()那样传递解析器时，我得到了这个错误：
SyntaxError:无法在模块module.exports =module.exports之外使用导入语句(“@钩子/解析器/yup”)；
我的验证模式：
const schema = Yup.object().shape({
person: Yup.string()
.min(3, "To pole jest za krótkie")
.max(30, "To pole jest za długie")
.requ
浏览 2提问于2021-02-13得票数 1
回答已采纳
4回答
我有这样的基本选择组件。
import { Controller } from "react-hook-form";
import Select, { StylesConfig } from "react-select";
//..
const [universe, setUniverse] = useState<SetStateAction<TOption | unknown>>(null);
<Controller
name="universe_id"
control={control} //
浏览 9提问于2022-07-03得票数 0
回答已采纳
我正在使用react-hook-form的Controller呈现一个自定义组件。 如果在使用register时发生错误，则焦点正常，但控制器不正常。 当Custom组件只处理一个输入时，我能够找到一种方法来处理错误，但是当它有多个输入时，我找不到一种方法来处理它。 Form.js import { Controller, useForm } from "react-hook-form";
import CustomInput from "./CustomInput";
import * as yup from "yup";
const sc
浏览 58提问于2021-10-26得票数 1
回答已采纳
[my simple program][1] class _MyHomePageState extends
State<MyHomePage> {
String? username;
@override
Widget build(BuildContext context) {
GlobalKey<FormState> formstate =
new GlobalKey<FormState>();
send() {
var _formdate = formstate.currentState;
if (_formdat
浏览 3提问于2022-02-08得票数 0
我使用的是"react-hook-form": "^7.39.5"，无法确定如何正确设置寄存器的类型。
index.tsx
const Index = () => {
const {
register,
handleSubmit,
formState: { errors },
getValues,
setValue,
} = useForm<FormInputs>({
resolver: yupResolver(formSchema),
})
const onSubmit = (d
浏览 15提问于2022-11-21得票数 1
回答已采纳
我有一个反应钩形式和一个反应-选择：
当我更改react select的值时，表单变得既脏又有效。提交按钮现在启用，表单可以发送。一旦发送表单，useForm defaultValue的值被重置为新值提交按钮再次被禁用，等待表单中的更改。<>H 110</code>当我再次更改时-选择值，表单不是脏的。按钮仍然是禁用的。然而，react select值已经更改.
我几乎什么都试过了:用onChange代替setValue("name", value, {shouldDirty: true}等等。
以下是代码：
import { useForm, Co
浏览 2提问于2021-10-19得票数 0
回答已采纳
一旦一个组件被触摸，然后用户清除输入，默认的行为就是错误继续显示。当输入在触摸后被清除时，如何才能使错误消失？
下面的代码是文档的摘录。
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
return (
<form onSubmit={hand
浏览 1提问于2021-05-16得票数 1
回答已采纳
1回答
更新react钩子表单中的错误
、、、、
所以我创建了一个自定义的输入包装器，它从react-hook-form中接收了几个道具。
这是我的文本输入
import { useForm } from 'react-hook-form'
const {
register,
formState: {
errors
},
} = useForm();
<TextInput
id={'password'}
errors={errors}
register={register}
options={{
minLength: {
message:
浏览 2提问于2021-06-04得票数 0
我正在尝试用react创建表单，并且已经处理了大部分的验证工作(比如显示消息)。当输入无效时，我还想在输入中添加icon/img。对此最好的方法是什么？
另外，如何在提交表单后重置输入？
import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
const on
浏览 0提问于2021-05-27得票数 2
在上面的沙箱项目中，当我单击submit按钮而没有输入到bio输入的文本时，需要获得一个错误bio字段。然后，当我键入该字段时，错误信息，而不是消失。Version 7与普通HTML表单和元素一起工作得非常好。但和反应带有冲突。
React版本: 17.2 React钩子版版本: 7.22 Reactstrap版本: 9.0
import "./styles.css";
import { Form, FormGroup, Input, Label, Button } from "reactstrap";
import * as Yup from "yup
浏览 5提问于2022-01-01得票数 1
回答已采纳
我有一个Form.js组件，它返回一个表单元素。此表单元素包含一个FormGroup组件，该组件接受inputType、inputName、inputPlaceholder等道具，并作为回报使用标签呈现输入字段。我正在使用Reacti-钩子表单来验证输入，但是在将输入提取到单独的组件之后，我无法让它工作。在我的原始代码中，验证失败时会出现错误，但是在提取标签并将其输入到自己的组件后，这将停止工作。
我最初的工作代码如下：
import { useState } from 'react';
import { useForm } from 'react-hook-form&
浏览 3提问于2021-04-18得票数 1
回答已采纳
我有一个带有useForm寄存器的Input，但onChange不工作。
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { Form, FormGroup, Input } from "reactstrap";
const App = () => {
const [loginData, setLoginData] = useState({
email: null,
password:
浏览 0提问于2021-05-29得票数 0
回答已采纳
我使用useController作为文本输入，但是我不能为自定义验证设置错误消息。我假设我可以使用与内置验证类似的带有值/消息的对象，但如果我尝试这样做，我会得到错误TypeError: validateFunction is not a function。 这可以很好地工作： <TextInput
control={control}
name={`email`}
label={`Email *`}
rules={{
r
浏览 103提问于2021-07-08得票数 1
回答已采纳
我有一个表单，可以正确地执行错误验证，但如果所有内容都填写并提交，则无法尝试显示成功消息。我正在使用react-hook-form包，但在文档中找不到任何东西。 我已经创建了errorMessage，它只是一个使用react-hook-form文档提示的开关 import React from "react";
import { useForm } from "react-hook-form";
import ErrorMessage from "./errorMessage";
import CustomButton from "..
浏览 33提问于2020-04-23得票数 2
我一直在尝试使用React-hook-form和Chakra UI组件库在Next.js中实现一个登录表单，但是我不明白为什么尽管我完全遵循了React-hook-form文档，我的表单验证错误消息仍然不能显示。我有它的设置，用户名必须是2-30个字符的长度和密码必须至少是8个字符的长度；两个输入字段都是必需的。在有效的表单提交时，将弹出一个警报，表示成功提交。然而，对于无效的表单提交，错误消息应该显示在无效输入的下面，但事实并非如此。然而，我已经注意到，无效的输入字段将在提交时获得焦点。 这就是我所看到的：https://codesandbox.io/s/quirky-wave-jgpwf
浏览 20提问于2020-09-07得票数 1
回答已采纳
我正在尝试将react Select包含到我的项目中，但是每当我使用时，我都会得到这个警告，然后是一个错误：
警告: React.createElement: type无效--需要一个字符串(用于内置组件)或类/函数(用于复合组件)，但是React.createElement: object。Uncaught : Element type无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got: object。
我这样用只是为了测试它：
import Select from 'react-select';
...
const options = [
浏览 3提问于2020-11-21得票数 0
回答已采纳
我用的是Next.js，TypeScript，智能和尾风。我试图使用“反应钩”形式，但我收到了一个错误。
我试过：
将Post函数更改为箭头函数
将Post函数更改为const函数
将IFormInput接口更改为类型
这是错误所在：
23 | formState: { errors },
> 24 | } = useForm<IFormInput>();
| ^
25 |
26 | return (
27 | <main>
这是我的代码(slug.tsx)在pages文
浏览 16提问于2022-06-09得票数 5
回答已采纳
我使用react-hook-form控制器与反应-选择。我使用的反应与类型记录。我可以在提交时获得所选的值，但它作为object.How返回来自options数组的值和标签，我只能返回值吗？这是密码，
const { handleSubmit, control, formState:{errors}} = useForm<IAddProductForm>();
const handleOnSubmit = (data:IAddProductForm) => {
console.log(data);
}
const categoryOptions =
浏览 0提问于2021-06-20得票数 1
回答已采纳
我想做一个带有验证的表单，我使用了react-hook-form和Material UI。对于验证，yup和钩子/解析器也被使用。当我单击复选框时，我想显示另一个textField，但复选框不起作用。watch用于来自react-hook-form(useForm)的内容。我的错误是什么？求求你，救命。
这是我的代码：-
浏览 15提问于2021-06-17得票数 2
使用react钩子形式版本7.11.1.
我有一个简单的控件，期望它在每个验证规则无效时显示多条错误消息。注册此控件时，我提供了一个带有自定义验证函数的“验证”选项。从validation契约中，我看到我的自定义验证函数应该返回ValidateResult类型。此类型可以是：Message欧元、Message[]、布尔值、未定义的(其中的消息是字符串)。因此，假设如果控件无效，我可以返回错误消息数组。但是，如果我返回的不是字符串而是数组，那么我就无法访问任何地方的错误消息: formState.errors.filedName.mesage是空的。
是否有任何方法使用错误消息数组来显示接口中的
浏览 0提问于2021-08-10得票数 1
1回答
我目前正在使用Astro和Fastify\Node作为我的服务器。我创建了一个SSR\Fastify插件并运行良好。不过，我遇到了一个问题，想看看其他人是否也遇到过类似的问题。我无法使用React。当运行正常的Astro而没有启用SSR时，它工作得很好。运行build命令后，当页面试图加载时，我收到以下错误消息:元素类型无效:预期为字符串(用于内置组件)或类/函数(用于复合组件)，但为got: object。“
我倾向于进口问题，但没有任何运气缩小它。
类型定义解析为:react-select/dist/ The selectcjs.d.ts
如果我使用节点ssr插件，我也会得到同样的错误。我
浏览 5提问于2022-10-10得票数 0
对于以前版本的react hook form，如果您使用以下几行代码创建了另一个form对象，则可以使用多个form： const {
register: register2,
handleSubmit: handleSubmit2,
errors: errors2
} = useForm() 现在，语法更改为formState后，第二种形式的errors对象不会被创建，并抛出一个错误。 const {
register: register2,
handleSubmit: handleSubmit2,
formState: {
浏览 59提问于2021-05-11得票数 0
回答已采纳
我有一个输入type=“文件”的材料ui设计。如何验证文件并显示错误消息？
App.js
import React from "react";
import {useForm } from "react-hook-form";
import Button from "@mui/material/Button";
import { MuiFileInput } from "mui-file-input";
export default function App() {
const { register, handleSubm
浏览 16提问于2022-11-13得票数 0
1回答
我是新接触react-redux的，我想用react-select创建一个下拉列表。我像这样创建了我的DropDown组件：
import React, { PropTypes } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
const options = [
{ value: 'one', label: 'One' },
{ value: 'tw
浏览 1提问于2017-03-01得票数 2
我使用的是getX，我在GlobalKey上有一个问题，所以我的项目中有一个控制器，这个控制器用于两个视图，即登录视图和注册视图，但是当用户在登录页面并转到注册页面或控制台中的其他地方时，出现了这个错误‘在小部件树中检测到了重复的GlobalKey’。
这是我的控制器：
class AuthController extends GetxController {
GlobalKey<FormState> loginFormKey;
GlobalKey<FormState> registerFormKey;
AuthController(
浏览 2提问于2022-01-15得票数 0
回答已采纳
1回答
我对react-hook-form和reactstrap有问题。我有这个组件List.jsx： import { useContext, useEffect } from "react";
import { ListContext, ADD_LIST } from '../providers/ShoppingListProvider';
import { Link } from "react-router-dom";
import { useForm } from 'react-hook-form';
import { List
浏览 30提问于2021-10-25得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
