组件状态更改时反应钩子表单错误未更新答案

【问题标题】：React hook form errors not updating when component state changes组件状态更改时反应钩子表单错误未更新
【发布时间】：2022-07-11 19:49:15
【问题描述】：

美好的一天，

我有一个使用 material-ui 构建的自定义组件。我正在尝试实现 react-hook-form。我正在使用 React forwardRef 注册组件。 React 钩子表单确实会触发并按预期显示错误。但是，当我在文本框中输入文本时，状态会通过 useState 钩子更新，但反应钩子表单错误对象不会选择它。换句话说，即使我有正确的值，我也无法提交表单。

首先是 CustomTextbox 组件。

import React from "react";
import TextField from '@material-ui/core/TextField';

interface Props {
  id: string;
  label: string,
  variant: "filled" | "standard" | "outlined",
  value: string, 
  setValue: React.Dispatch<React.SetStateAction<string>>,
  disabled?: boolean
}

const CustomTextBox: React.FC<Props> = React.forwardRef(({id, label, variant, value, setValue, 
  disabled=false}, ref) => {


const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {                
    setValue(e.currentTarget.value);
  }
  return (
    <TextField id={id} label={label} value={value} variant={variant} onChange={e => 
      handleChange(e)} disabled={disabled} inputRef={ref} />
  );
}) 

export default CustomTextBox;

接下来是如何将此组件与 react-hook-form 一起使用

import { ErrorMessage } from "@hookform/error-message";
import { Subtitle2 } from "@material/react-typography";
import React, { useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { CustomButton } from "../HtmlComponents/CustomButton";
import CustomTextBox from "../HtmlComponents/CustomTextBox";

const UseComponent: React.FunctionComponent = () => {
  const [jobTitle, setJobTitle] = useState("");

  type Inputs = {
    jobTitle: string
  }

    const { register, handleSubmit, watch,  formState: { errors } } = useForm<Inputs>();
    const onSubmit: SubmitHandler<Inputs> = data => console.log(data);

    useEffect(() => {
        console.log(jobTitle);
    }, [jobTitle])

  return(
    <form  onSubmit={handleSubmit(onSubmit)}>
      <CustomTextBox id="jobTitle" variant="filled" label="Given Names *" value={jobTitle} 
         setValue={setJobTitle} {...register("jobTitle", {required: "Job title is required"})} />                                               
      <ErrorMessage errors={errors} name="jobTitle" render={({ message }) => <Subtitle2 style= 
         {{color: "red"}}>{message}</Subtitle2>} />                             
      <CustomButton id="submit" label="Save" variant="contained"  submit={true} 
        disabled={false} />         
    </form>
  )
}

export default UseComponent

这显然不是整个页面，而只是尝试通过 react-hook-form 重用自定义组件的一个示例。

当我提交时，会显示错误消息，这是预期的，但我也希望当我在文本框中输入文本时错误会消失。

另外请注意，jobTile 上的 useEffect 确实会触发，并且每当我在文本框中键入时它都会被控制台记录下来。因此，这意味着传递给 custome 组件的 useState 函数会触发并更新状态。

我遇到的问题是 react-hook-form 没有拾取这种状态变化，因此错误仍然存在。

我很确定我正在做某事，但我无法拿起它。我感谢任何和所有的帮助。

来自南非的感谢和问候。

【问题讨论】：

标签： reactjs material-ui react-hook-form

【解决方案1】：

在使用 Material-UI 和 react-hook-form 时，您必须使用 Controller。

参考资料：

【讨论】：