Uncaught TypeError:对象不可迭代(无法读取属性Symbol(Symbol.iterator))



我不知道为什么会出现这个错误。我刚开始反应,我创建了这个简单的表单,但它在渲染时会出错。这是一个四字段输入表单,我在每个输入的onChange上使用HANDLECHANGE函数,并根据它们的名称获取所有值,使用handleSubmit函数来避免表单的正常行为。handleSubmit不是问题因素,但我仍然尝试删除它,但代码仍然不起作用。如果我在做傻事,请告诉我。这是我的代码文件。

import React from "react";
import useForm from "./useForm";
function FormSignup() {
const [values, handleChange, handleSubmit] = useForm();
return (
<div className="formContent">
<form className="form" onSubmit={handleSubmit}>
<h1>Get Started with us today!</h1>
<div className="formElements">
<label htmlFor="username" className="formLabel">
Username
</label>
<input
type="text"
name="username"
className="Inputs"
onChange={handleChange}
value={values.username}
placeholder="Enter your username"
/>
<label htmlFor="email" className="formLabel">
Email
</label>
<input
type="email"
name="email"
className="Inputs"
onChange={handleChange}
value={values.email}
placeholder="Enter your email"
/>
<label htmlFor="password" className="formLabel">
Password
</label>
<input
type="password"
name="password"
className="Inputs"
onChange={handleChange}
value={values.password}
placeholder="Enter your password"
/>
<label htmlFor="password2" className="formLabel">
Confirm Password
</label>
<input
type="password"
name="password2"
className="Inputs"
onChange={handleChange}
value={values.password2}
placeholder="Confirm your password"
/>
<button className="formButton" type="submit">
SignUp
</button>
</div>
</form>
</div>
);
}
export default FormSignup;

在我的useform文件中,我用状态钩子处理表单输入。想知道我是不是做错了什么。

import { useState } from "react";
const useForm = () => {
const [values, setValues] = useState({
username: "",
email: "",
password: "",
password2: "",
});
const handleChange = (e) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
function handleSubmit(e) {
e.preventdefault();
}
return {
handleChange,
values,
handleSubmit,
};
};
export default useForm;

您从useForm钩子返回一个对象,但将其作为数组进行销毁。我认为如果你改变

const[values,handleChange,handleSubmit]=useForm((;

const{values,handleChange,handleSubmit}=useForm((;

您的代码应该可以工作。

相关内容

最新更新