在 React 打字稿中提交表单

问题描述

我正在尝试向本地数据库提交表单，但一直收到错误消息：

:Error: Objects are not valid as a React child (found: Error: Network Error)。如果您打算渲染一组子项，请改用数组

谁能给我一些关于发生了什么以及我该如何解决的见解？代码如下：

import axios from 'axios';
import type  { FC } from 'react';
import { useState } from 'react';
import { useForm,SubmitHandler } from 'react-hook-form';
import './AgentForm.css';

interface IFormInputs {
    firstName: string;
    lastName: string;
    photoUrl: string | null; 
    agentLicence: string; 
    address: string; 
    practiceAreas: string;
    aboutMe: string | null;
}

const AgentForm: FC = () => {
    const { register,handleSubmit,formState: {errors} } = useForm<IFormInputs>();
    const [error,setError] = useState<string>("");
    const [eventCreated,setEventCreated] = useState<boolean>(false);

    const submitForm: SubmitHandler<IFormInputs> = async (agent: IFormInputs) => {
        if (!agent.photoUrl) {
            agent.photoUrl = null;
        }
        if (!agent.aboutMe) {
            agent.aboutMe = null;
        }
        // console.log(JSON.stringify(agent))

        try {
            await axios.post('http://localhost:3001/agents',JSON.stringify({
                firstName: agent.firstName,lastName: agent.lastName,photoUrl: agent.photoUrl,agentLicence: agent.agentLicence,address: agent.address,practiceAreas: agent.practiceAreas,aboutMe: agent.aboutMe
            }));
            setEventCreated(true);
            setError('');
        } catch (error) {
            setError(error);
        }  
    }

  return (
    <>
        {eventCreated && <div className='event-created'>Event Created</div>}
        {error && <div className='error'>{error}</div> }
        <form 
        onSubmit={handleSubmit(submitForm)}
        className={'agent-form'}
        >
            {/* first name */}
            <label htmlFor='firstName'>First name</label>
            <input
                {...register('firstName')}
                id='firstName'
                className='form-control'
                type='text'
                placeholder='Joe'
                required
            />
            {errors.firstName && <span>This field is required</span>}
            {/* last name */}
            <label htmlFor='lastName'>Last Name</label>
            <input
                {...register('lastName')}
                id='lastName'
                className='form-control'
                type='text'
                placeholder='Persons'
                required
            />
            {errors.lastName && <span>This field is required</span>}
            {/*  photo url*/}
            <label htmlFor='photoUrl'>Photo Url</label>
            <input
                {...register('photoUrl')}
                id='photoUrl'
                className='form-control'
                placeholder='https://unsplash.com/photos/KBzb07tXYWA?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink'
                type='text'
            />
            {/* agent license */}
            <label htmlFor='agentLicence'>Agent License</label>
            <input
                {...register('agentLicence')}
                id='agentLicence'
                className='form-control'
                type='text'
                placeholder='123456'
                required
            />
            {errors.agentLicence && <span>This field is required</span>}
            {/* address */}
            <label htmlFor='address'>Address</label>
            <input
                {...register('address')}
                id='address'
                className='form-control'
                type='text'
                placeholder="555 Some Place Rd,Los Angeles,CA 90077"
                required
            />
            {errors.address && <span>This field is required</span>}
            {/* practice areas */}
            <label htmlFor='practiceAreas'>Practice Areas</label>
            <input 
                {...register('practiceAreas')}
                id='practiceAreas'
                className='form-control'
                type='text'
                placeholder='Los Angeles,San Francisco,Miami'
                required
            />
            {errors.practiceAreas && <span>This field is required</span>}
            {/* about me */}
            <label htmlFor='aboutMe'>About Me</label>
            <textarea
                {...register('aboutMe')}
                id='aboutMe'
                className='agent-text-area'
            />
            <button className='submit-agent' type='submit'>Submit</button>
        </form>
    </>
  );
};

export default AgentForm; 

解决方法

看起来它是靠近组件标记顶部的 error 引用：

  return (
    <>
        {eventCreated && <div className='event-created'>Event Created</div>}
        {error && <div className='error'>{error}</div> }
        {/*                          here ^^^^^ */}

正如它所说，“对象作为 React 子对象无效”并且 error 是一个对象。要么引用 error 的属性（例如 error.message 之类的东西），要么尝试 error.toString()。

,

看起来错误来自这一行：

        {error && <div className='error'>{error}</div> }

因为 {error} 不是有效的 react 子项。

你或许可以使用这样的东西：

        {error && <div className='error'>{error.toString()}</div> }

然后您应该能够看到真正的提交错误。