反應物件狀態的設定狀態和清除狀態-有解無憂

我有error狀態物件來驗證表單輸入：


  const [error, setError] = useState({
    nameArErr: "",
    nameEnErr: "",
    accountNumberErr: "",
    ageErr: "",
    phoneNumberErr: "",
    hireDateErr: "",
    birthDateErr: "",
  });

  const handleAdd = (e) => {

    setError({});

    if (nameAr.current.value.length < 11) {
      setError({ ...error, nameArErr: "please enter your full name" });
    }

    if (nameEn.current.value.length < 11) {
      setError({ ...error, nameEnErr: "please enter your full name" });
    }

    if (accountNumber.current.value === "") {
      setError({ ...error, accountNumberErr: "account number can't be empty" });
    }

    if (
      Number(age.current.value) > 60 ||
      Number(age.current.value) < 18 ||
      age.current.value === ""
    ) {
      setError({ ...error, ageErr: "please enter a valid age" });
    }

    if (phoneNumber.current.value.length !== 10) {
      setError({
        ...error,
        phoneNumberErr: "please enter a valid phone number",
      });
    }

    if (hireDate.current.value === "") {
      setError({ ...error, hireDateErr: "hire date can't be empty" });
    }

    if (birthDate.current.value === "") {
      setError({ ...error, birthDateErr: "birth date can't be empty" });
    }

    console.log(error);


  };

我的代碼問題是：

首先，如果一切if statements都為真，它不會setState一下子全部成立，而是setState最后一個為真if statement

第二個 setError({});只有在一切statements都錯了的情況下才有效，但我想要的是讓我們說函式被觸發并且第一個if statement應用然后nameArErr值將是"please enter your full name"，然后假設函式被再次觸發并且陳述句不再適用，那么nameArErr應該是空的代碼行，setError({});但直到所有陳述句都錯了！

uj5u.com熱心網友回復：

我將使用一個陣列/物件來存盤錯誤，最后使用陣列/物件設定一個 setState（如果沒有錯誤，則什么都沒有）：

  const [error, setError] = useState({});

  const handleAdd = (e) => {
    let errors = {};
    if (nameAr.current.value.length < 11) {
        errors.nameArErr = "please enter your full name";
    }

    if (nameEn.current.value.length < 11) {
        errors.nameEnErr= "please enter your full name";
    }

    if (accountNumber.current.value === "") {
        errors.accountNumberErr = "account number can't be empty";
    }

    if (
      Number(age.current.value) > 60 ||
      Number(age.current.value) < 18 ||
      age.current.value === ""
    ) {
        errors.ageErr = "please enter a valid age";
    }

    if (phoneNumber.current.value.length !== 10) {
        errors.phoneNumberErr = "please enter a valid phone number";
    }

    if (hireDate.current.value === "") {
        errors.hireDateErr = "hire date can't be empty";
    }

    if (birthDate.current.value === "") {
        errors.birthDateErr = "birth date can't be empty";
    }
    setError(errors);
  };

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510399.html

標籤：反应形式验证if 语句设置状态

上一篇：如何更改此腳本以具有最大字符限制而不是最小字符限制？

下一篇：Symfony如何使用單選按鈕？