reactjs - 在 React 打字稿中提交表单
问题描述
我正在尝试向本地数据库提交表单,但我不断收到错误消息:
:Error: 对象作为 React 子项无效(发现:错误:网络错误)。如果您打算渲染一组孩子,请改用数组
谁能给我一些关于发生了什么以及如何解决它的见解?这是代码:
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 && <div className='error'>{error}</div> }
因为{error}
不是一个有效的反应孩子。
您可能可以改用这样的东西:
{error && <div className='error'>{error.toString()}</div> }
然后您应该能够看到真正的提交错误。
推荐阅读
- dialogflow-es - 在另一个意图结束时触发一个意图
- python - 在缩进中赋值给变量
- python-3.x - 如何将sklearn线性回归系数和截距转换为3位小数?
- testing - 如何在 Cucumber-QAF 设置中跳过通过的测试用例
- reactjs - 更改的开玩笑输入未触发/模拟
- reactjs - 如何使用反应样式组件添加自定义 CSS
- gradle - gradle 中 JUnit 5 和 JUnit 4 的不同配置
- reactjs - 你可以将 scss 文件作为道具传递给另一个反应组件来使用吗?
- c# - WCF XML反序列化不填充数组
- r - 使用 dplyr 根据模式过滤数据帧并重新排序