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

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)
}

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

How do I prevent this form from being submitted if errors still exist?

validation

reactjs

react-native

react-hooks