Reactjs 在表单提交期间，对象作为React子对象无效

在提交表单时抛出以下错误。当我删除表单onSubmit中的

handleSubmit

并刚刚调用onSubmit={onSubmit}时，错误消失了，但我无法看到显示的字段验证错误

对象作为React子对象无效（找到：具有键{type，message，ref}的对象）。如果要呈现子对象集合，请改用数组。

import React, { useRef, useEffect, useState } from "react";
import { useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import Axios from "axios";


const Nominate = () => {

    const { token } = useParams();
    const [formRegister, setRegister] = useState([{ _id: '', nomineename: '', nomineeemail: '', description: '', nominatedby: ''}]);
    const { handleSubmit, register, formState: { errors } } = useForm();

    const onChange = (e) => {
        e.persist();
        setRegister({ ...formRegister, [e.target.name]: e.target.value });
      }

    const onSubmit = () => {
        const formData = new FormData();
        for(let key in formRegister) {
            formData.append(key,formRegister[key]);
        }
        const config = {
            headers: {
                'content-type': 'multipart/form-data' 
            }
          }
        const fetchData = async () => {
            try {
                const res = await Axios.put('http://localhost:8000/service/nominateperson', formData, config);
                if (res.data) {
                    console.log("Link token created:" + res.data);
                }
            } catch (e) {
                console.log(e);
            }
        }
        fetchData(); 
    }

    return (
        <div className="App">
            <h1>Nominate Person</h1>
            <form onSubmit={handleSubmit(onSubmit)}  className="linkForm inputForm">
                <div className="inputField" >
                    <input name="nomineename" 
                    placeholder="nominate a person" 
                    type="text" 
                    {...register('nomineename',{
                        required: "Nominate a person is required !",
                        pattern: {
                          value: /^[a-zA-Z\s]/,
                          message: "Invalid name !"
                        }
                      })
                    }
                      onChange={onChange}
                    /> 
                    <span className="loginErrorTextFormat">{errors.nomineename && errors.nomineename.message}</span>
                </div>
                <div className="inputField" >
                    <input name="email" 
                    placeholder="nominee email" 
                    type="text" 
                    {...register('email',{
                        required: "Email is required !",
                        pattern: {
                            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                           message: "Invalid email address !"
                        }
                      })}
                      onChange={onChange}
                    />
                    <span className="loginErrorTextFormat">{errors.email && errors.email.message}</span>
                </div>
                <div className="inputField" >
                    <textarea name="description" 
                    placeholder="reason for nomination"  
                    maxLength={1000}
                    {...register('description',{
                        required: "Description is required !"
                      })}
                      onChange={onChange}
                    />
                   <span className="loginErrorTextFormat">{errors.description}</span> 
                </div>
                <div className="inputField nominatedby" >
                    <input name="nominatedby" 
                    placeholder="nominated by" 
                    type="text" 
                    {...register('nominatedby',{
                        required: "Nominate by is required !",
                        pattern: {
                          value: /^[a-zA-Z\s]{2,30}$/,
                          message: "Invalid name !"
                        }
                      })}
                      onChange={onChange}
                    /> 
                    <span className="loginErrorTextFormat">{errors.nominatedby && errors.nominatedby.message}</span>
                </div>
                <span className="getlinkbutton">
                    <input type="submit"/>
                </span>
            </form>
        </div>
    )
}

export default Nominate

import React，{useRef，useffect，useState}来自“React”；
从'react router dom'导入{useParams}；
从“react hook form”导入{useForm}；
从“Axios”导入Axios；
常数指定=（）=>{
const{token}=useParams（）；
const[formRegister，setRegister]=useState（[{U id:''，被提名人姓名：''，被提名人电子邮件：''，说明：''，被提名人：'}]）；
const{handleSubmit，register，formState:{errors}}=useForm（）；
const onChange=（e）=>{
e、 坚持（）；
setRegister（{…formRegister，[e.target.name]：e.target.value}）；
}
const onSubmit=（）=>{
const formData=new formData（）；
for（输入formRegister）{
append（key，formRegister[key]）；
}
常量配置={
标题：{
“内容类型”：“多部分/表单数据”
}
}
const fetchData=async（）=>{
试一试{
const res=等待Axios.put（'http://localhost:8000/service/nominateperson，formData，config）；
如果（资源数据）{
日志（“创建的链接令牌：+res.data”）；
}
}捕获（e）{
控制台日志（e）；
}
}
fetchData（）；
}
返回(
提名人
{errors.namegateName&&errors.namegateName.message}
{errors.email&&errors.email.message}
{errors.description}
{errors.nominatedby&&errors.nominatedby.message}
)
}
导出默认指定

试试这个：

onSubmit={() => handleSubmit(onSubmit)}

---

将其设置为嵌套函数应防止在呈现页面时执行

handleSubmit（）

。

错误。说明应为

{ errors.description && errors.description.message }