Next.js注册表单错误处理：重置错误状态并更新指定字段

核心问题分析 #

当前代码存在两个关键问题：

• 存在验证错误时，仅更新对应字段的错误信息，但保留了其他字段的旧错误值，不符合“其余键设为空字符串”的需求
• 无错误时未清空所有错误状态，导致旧错误残留

修改后的完整代码 #

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' // 修正：cache参数需放在fetch配置对象内
    });
    const content = await res.json();

    if (content.error) {
      // 先重置所有错误为空，再设置当前字段的错误信息
      setErrors({
        name: "",
        email: "",
        password: "",
        [content.error[0].path[0]]: content.error[0].message
      });
    } else {
      // 无错误时清空所有错误状态
      setErrors({
        name: "",
        email: "",
        password: ""
      });
      // 可在此添加提交成功后的逻辑，如页面跳转、成功提示等
    }

    // 注意：setState是异步操作，此处console.log输出的是更新前的旧值
    // 若需查看最新错误状态，可通过useEffect监听errors变化
  };

  // 表单渲染逻辑（省略）
}

关键修改说明 #

• 错误状态重置逻辑：存在错误时，不再继承旧的errors状态，而是先初始化所有字段错误为空，再单独赋值当前错误字段，确保其他字段错误被清空
• 无错误处理分支：新增else分支，直接将errors所有字段重置为空，彻底清除历史错误
• fetch参数修正：原代码中cache: 'no-store'的位置错误，已调整至fetch的配置对象内

额外提示 #

若需要实时查看errors的最新状态，可添加以下监听逻辑：

useEffect(() => {
  console.log("当前错误状态:", errors);
}, [errors]);

内容的提问来源于stack exchange，提问作者Mouad Hnida