L’appel du hook personnalisé setState à partir du gestionnaire de soumission de formulaire ne met pas à jour l’état

Question

Les champs du formulaire m'obligent à me concentrer dessus afin d'afficher le message d'erreur. Je souhaite qu'un message d'erreur apparaisse lorsque je clique sur "Envoyer" alors que je n'ai pas encore ciblé le champ.

Voici le hook (soupçonné d'être à propos de l'appel setIsTouched plus tard) :

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,
  };
};

Voici le gestionnaire de formulaire (j'ai utilisé des alias pour chaque champ) :

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

Prenons par exemple le champ du nom de vérification qui est vide et je clique sur le bouton Soumettre au début. Actuellement dans const hasError = errorArray.length > 0 && isTouched;, le tableau contient des éléments mais isTouched est faux car je ne me concentre pas sur le champ.

Ensuite, "touchNameField(true);" entre. J'ai essayé de rendre hasError vrai mais cela s'affiche toujours faux.

L'appel setState est asynchrone, est-ce là le problème ? Si je supprime l'appel de réinitialisation, cela fonctionne. Mais je ne comprends toujours pas pourquoi nameInputError etc. sont faux.

Answer 1

Si vous ne l'exécutez pas, je pense que c'est parce que errorArray 和 hasError ne réagit pas aux changements. Cela dépend donc aussi de l'endroit où vous instanciez ce hook. Si je ne teste pas , j'essaierais ce qui suit :

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,
  };
};

Encore une fois, non testé et vous aurez peut-être besoin de quelques ajustements.