我正在使用next js创建注册表单,并使用joi.js处理错误,如果有错误,则在获取数据后,如果错误在名称输入中,则将其作为处于错误状态的名称键的值传递,并将空字符串传递给其他键(电子邮件和密码),对于其他错误也是如此,我试着这样做,但当没有错误时,处于错误状态的键总是过去的值。
(抱歉我英语不好)
从中提取数据的文件Login. tsx
export default function Login() {
const [data, setData] = useState({ name: "", email: "", password: "" });
const [errors, setErrors] = useState({
name: "",
email: "",
password: "",
});
const handleChange = (e) => {
setData({
...data,
[e.target.name]: e.target.value,
});
};
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch("/api/users", {
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
},
method: "POST",
}, { cache: 'no-store' });
const content = await res.json();
if(content.error) {
setErrors({...errors, [content.error[0].path[0]]:content.error[0].message})
}
console.log(errors);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
1条答案
按热度按时间js5cn81o1#
errors
状态变量中总是有旧值,因为您是通过先传播旧值来设置新错误的:setErrors({...errors, *****})
你的
content.error
包含了什么?我可以看到你只访问了第一个元素(content.error[0]
),但是你收到了提交的所有错误吗?如果你收到了,你不需要传播旧的错误,只需运行响应中报告的所有错误并重新创建你的errors
对象。