Memanggil setState cangkuk tersuai dari dalam pengendali penyerahan borang tidak mengemas kini keadaan

Question

Medan dalam borang memerlukan saya memfokuskannya untuk memaparkan mesej ralat. Saya mahu mesej ralat muncul apabila saya mengklik "Serah" apabila saya belum memfokuskan medan itu lagi.

Ini adalah cangkuk (disyaki mengenai panggilan setIsTouched kemudian):

const useInputModifed = (validationArray) => {
  const [enteredValue, setEnteredValue] = useState("");
  const [isTouched, setIsTouched] = useState(false);

  //   [{errorName:,fn:validationFn}]
  let errorArray = [];

  for (const errorEntry of validationArray) {
    if (errorEntry.isErrorFn(enteredValue)) {
      errorArray.push(errorEntry.errorName);
    }
  }

  const hasError = errorArray.length > 0 && isTouched;

  const valueChangeHandler = (event) => {
    setEnteredValue(event.target.value);
  };

  const reset = () => {
    setEnteredValue("");
    setIsTouched(false);
  };

  console.log(errorArray, isTouched);

  return {
    value: enteredValue,
    validationArray: errorArray,
    hasError,
    valueChangeHandler,
    setIsTouched,
    isTouched,
    reset,
  };
};

Ini ialah pengendali borang (saya menggunakan alias untuk setiap medan):

const formSubmissionHandler = (event) => {
    event.preventDefault();
    touchNameField(true);
    touchEmailField(true);


    if (nameInputHasError || emailInputHasError) {
 //console logging both fields gives false even after touching
      return;
    }
  
    if (!nameInputHasError && !emailInputHasError) {
      resetNameInput();
      resetEmailInput();
    }
  };

Ambil contoh medan nama pengesahan kosong dan saya klik butang hantar pada mulanya. Pada masa ini dalam const hasError = errorArray.length > 0 && isTouched; tatasusunan mempunyai elemen tetapi isTouched adalah palsu kerana saya tidak mempunyai tumpuan pada medan.

Kemudian "touchNameField(true);" masuk. Saya cuba membuat hasError benar tetapi ia masih menunjukkan palsu.

Panggilan setState tidak segerak, adakah ini masalahnya? Jika saya mengalih keluar panggilan tetapan semula ia berfungsi. Tetapi saya masih tidak faham mengapa nameInputError dsb. adalah palsu.

Answer 1

Jika anda tidak menjalankannya, saya percaya ia adalah kerana errorArray 和 hasError tidak bertindak balas terhadap perubahan. Jadi ia juga bergantung pada tempat anda membuat instantiat cangkuk itu. Jika tidak menguji Saya akan cuba yang berikut:

const useInputModifed = (validationArray) => {
  const [enteredValue, setEnteredValue] = useState("");
  const [isTouched, setIsTouched] = useState(false);

  const [errorArray, setErrorArray] = useState([]);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const newErrorArray = [];
    for (const errorEntry of validationArray) {
      if (errorEntry.isErrorFn(enteredValue)) {
        newErrorArray.push(errorEntry.errorName);
      }
    }
    setErrorArray(newErrorArray);
  }, [validationArray, enteredValue])

  useEffect(() => {
    setHasError(errorArray.length && isTouched);
  }, [errorArray, isTouched])

  const valueChangeHandler = (event) => {
    setEnteredValue(event.target.value);
  };

  const reset = () => {
    setEnteredValue("");
    setIsTouched(false);
  };

  console.log(errorArray, isTouched);

  return {
    value: enteredValue,
    validationArray: errorArray,
    hasError,
    valueChangeHandler,
    setIsTouched,
    isTouched,
    reset,
  };
};

Sekali lagi, tidak diuji dan anda mungkin memerlukan beberapa pelarasan.