如何解决在 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> }
然后您应该能够看到真正的提交错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。