如果错误仍然存​​在，如何防止提交此表单？

Question

即使firstName 和lastName 字段为空，以下函数始终在组件的第一次渲染时提交表单。

const [formErrors, setFormErrors] = useState({});

const registerUser = () => {
    if (firstName === "") {
      setFormErrors((prev) => {
        return { ...prev, firstName: "Firstname is required!" };
      });
    }

    if (lastName === "") {
      setFormErrors((prev) => {
        return { ...prev, lastName: "Lastname is required!" };
      });
    }

    if (Object.keys(formErrors).length === 0) {
      console.log("Form Submitted");
    } else {
      console.log("Failed");
    }
}

在第一次渲染时，Object.keys(formErrors).length 的值为 0，但是错误显示在屏幕上，奇怪！。

我尝试使用useRef，它有效，但它不会在屏幕上显示错误，因为组件不会使用useRef 重新渲染。

如果错误仍然存​​在，如何防止提交此表单？

谢谢

Answer 1

您的问题是您调用了 set state (formErrors)，然后您尝试立即读取它。所以当你设置它时，它还没有更新，你正在读取陈旧的数据。

要修复它，请在该函数中使用一些局部变量（最初您可能希望使用状态数据对其进行初始化）来跟踪错误，然后在完成后将其置于状态。

类似的东西

const registerUser = () => {

    let errors = {
        ...formErrors
    }

    if (firstName === "") {
        errors.firstName = "Firstname is required!"        
    }

    if (lastName === "") {
        errors.lastName = "lastName is required!"    
    }

    if (Object.keys(errors).length === 0) {
        console.log("Form Submitted");
    } else {
        console.log("Failed");
    }

    setFormErrors(errors)
}