Durch den Aufruf des benutzerdefinierten Hooks „setState“ aus dem Formularübermittlungs-Handler wird der Status nicht aktualisiert

Question

Bei Feldern im Formular muss ich mich darauf konzentrieren, damit die Fehlermeldung angezeigt wird. Ich möchte, dass die Fehlermeldung erscheint, wenn ich auf „Senden“ klicke, obwohl ich das Feld noch nicht fokussiert habe.

Dies ist der Hook (vermutlich handelt es sich später um den setIsTouched-Aufruf):

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

Dies ist der Formularhandler (ich habe für jedes Feld Aliase verwendet):

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

Nehmen wir zum Beispiel, dass das Feld „Bestätigungsname“ leer ist und ich am Anfang auf die Schaltfläche „Senden“ klicke. Derzeit enthält das Array in const hasError = errorArray.length > 0 && isTouched; Elemente, aber isTouched ist falsch, da ich mich nicht auf das Feld konzentriere.

Dann kommt „touchNameField(true);“ Ich habe versucht, hasError auf „true“ zu setzen, aber es wird immer noch „false“ angezeigt.

Der setState-Aufruf ist asynchron. Liegt hier das Problem? Wenn ich den Reset-Aufruf entferne, funktioniert es. Aber ich verstehe immer noch nicht, warum nameInputError usw. falsch sind.

Answer 1

如果不运行它，我相信这是因为 errorArray 和 hasError 对更改没有反应。因此，这还取决于您实例化该钩子的位置。 如果不进行测试，我会尝试以下操作：

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

同样，未经测试，您可能需要一些调整。