javascript 如何在React js中将对象状态的所有键都设置为空数组并只更改其中一个键

iyr7buue  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(152)

我正在使用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>
js5cn81o

js5cn81o1#

errors状态变量中总是有旧值,因为您是通过先传播旧值来设置新错误的:setErrors({...errors, *****})
你的content.error包含了什么?我可以看到你只访问了第一个元素(content.error[0]),但是你收到了提交的所有错误吗?如果你收到了,你不需要传播旧的错误,只需运行响应中报告的所有错误并重新创建你的errors对象。

相关问题