React自定义Hook在表单提交时setState无法更新状态的问题

我的表单字段需要聚焦后才会显示错误提示，希望点击提交按钮时，即使未聚焦字段也能触发错误提示。

自定义Hook代码 #

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

表单处理函数代码 #

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

问题分析 #

核心原因就是React的setState是异步更新的。调用touchNameField(true)本质是调用Hook里的setIsTouched(true)，但这个状态更新不会立刻生效，组件要等到下一次重渲染才会更新isTouched的值。所以在你调用touchNameField后立刻判断nameInputHasError时，拿到的还是更新前的isTouched: false，导致hasError依然为false。

另外你代码里还有个额外问题：如果验证逻辑没拦住，后续的resetNameInput()会把isTouched重置为false，就算状态更新了也会被覆盖，进一步导致错误提示无法显示。

解决方案 #

方案1：优化自定义Hook，添加提交状态标记 #

给Hook新增一个isSubmitted状态，用来标记表单是否被提交过，同时调整hasError的判断逻辑——只要字段被触碰过或者表单被提交过，且有错误就显示提示。这样提交时直接标记提交状态，就能立刻触发错误提示。

修改后的Hook：

const useInputModified = (validationArray) => {
  const [enteredValue, setEnteredValue] = useState("");
  const [isTouched, setIsTouched] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false); // 新增提交状态

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

  // 更新hasError逻辑：提交过 或者 字段被触碰过，且存在错误
  const hasError = (isTouched || isSubmitted) && errorArray.length > 0;

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

  const touch = () => {
    setIsTouched(true);
  };

  // 新增标记提交状态的方法
  const markAsSubmitted = () => {
    setIsSubmitted(true);
  };

  const reset = () => {
    setEnteredValue("");
    setIsTouched(false);
    setIsSubmitted(false); // 重置时同步清空提交状态
  };

  return {
    value: enteredValue,
    validationArray: errorArray,
    hasError,
    valueChangeHandler,
    touch,
    markAsSubmitted,
    reset,
  };
};

对应的表单处理函数修改：

const formSubmissionHandler = (event) => {
  event.preventDefault();
  // 标记表单已提交
  nameInputMarkAsSubmitted();
  emailInputMarkAsSubmitted();

  // 此时hasError已基于提交状态更新，能正确判断错误
  if (nameInputHasError || emailInputHasError) {
    return;
  }

  // 验证通过后再执行重置
  resetNameInput();
  resetEmailInput();
};

方案2：利用useEffect监听状态变化 #

如果不想修改Hook，可以在组件中新增一个状态标记是否需要执行提交逻辑，通过useEffect监听错误状态的变化，确保在isTouched更新后再判断是否提交。

组件内代码修改：

import { useEffect, useState } from 'react';

// ... 其他代码

const [shouldProcessSubmit, setShouldProcessSubmit] = useState(false);

// 监听提交标记和错误状态，在状态更新后处理逻辑
useEffect(() => {
  if (shouldProcessSubmit) {
    if (!nameInputHasError && !emailInputHasError) {
      resetNameInput();
      resetEmailInput();
    }
    setShouldProcessSubmit(false);
  }
}, [shouldProcessSubmit, nameInputHasError, emailInputHasError]);

const formSubmissionHandler = (event) => {
  event.preventDefault();
  // 标记字段为已触碰
  touchNameField(true);
  touchEmailField(true);
  // 触发后续处理逻辑
  setShouldProcessSubmit(true);
};

内容的提问来源于stack exchange，提问作者Reuben B