React JS-在React JS表单中获取数据显示

Question

社区您好，我想在React JS中显示获取数据。数据已被提取。我想在表单中显示。我也尝试过.map方法来显示，但它抛出了一个错误。我是React JS的新手。

const UserInfo = () => {
const [userData, setUserData] = useState([]);
const { id } = useParams();
useEffect(() => {
axios.get(`http://localhost:8080/users/user-info/${id}`)
.then(res => {
setUserData(res.data)
console.log("data fetch", res.data);
}).catch(e => console.log(e));
}, []);
return (
<>
<form method='post' autoComplete='off'>
<div className='register-group_input'>
<input type="text" name="name" autoComplete='off'
required placeholder='Username' onChange={inputHandler} />
{
errorField.nameErr.length > 0 && <div className='error-class'>
<span className='error'>{errorField.nameErr}</span></div>
}
</div>
<div className='register-group_input'>
<input type="email" name="email" autoComplete='off' required placeholder='Email'
onChange={inputHandler} />
{
errorField.emailErr.length > 0 && <div className='error-class'>       <span className='error'>{errorField.emailErr}</span></div>
}
</div>
<button type="button" className='register-send_btn' onClick={submitButton}>
<span className='register-send_icon'>
<img src={send_icon} alt='send_icon' />
</span>
<span>Save Changes</span>
</button>
</form>
</>
);
}
export default UserInfo;

我已经尝试过.map方法进行数据循环，但它显示了一个错误，所以我在代码中删除了它。请让我知道我必须把.map方法放在哪里。提前谢谢。

Answer 1

return(
<>
//your jsx code
{
userData &&
userData.map(field=>{
return <input key={field.id} type={field.type} name={field.name} />
})
}
// your jsx code
</>
)