React中setState后执行函数问题：useEffect失效及初始化触发疑问

问题1：确保error更新后再打开模态框 #

方案1：使用setState的回调函数（推荐） #

setError支持传入回调函数，该函数会在状态更新完成后执行，可直接在这里触发模态框，保证error已是最新值：

const submitHandler = (e) => {
  e.preventDefault();
  const isValid = checkValidity(formState);
  if (!isValid) {
    const wrongInput = Object.keys(formState).find((item) => !formState[item].valid);
    const newError = {
      title: formState[wrongInput].title,
      error: formState[wrongInput].message,
    };
    setError(newError, () => {
      setShowModal(true);
    });
  }

  // do something if its valid...
};

这种方式无需依赖useEffect，逻辑更直接，避免状态更新时机问题。

方案2：优化useEffect依赖与判断 #

若坚持使用useEffect，需针对error的具体属性设置依赖，并判断是否为有效错误：

useEffect(() => {
  // 仅当错误信息非空时，打开模态框
  if (error.error) {
    setShowModal(true);
  }
}, [error.error, error.title]);

依赖error.error和error.title而非整个对象，避免因对象引用变化导致的不必要触发，同时确保状态更新后执行逻辑。

问题2：阻止useEffect初始化触发 #

React的useEffect默认会在组件挂载时执行一次，要避免初始化时打开模态框，只需在useEffect中加入判断：仅当error不是初始空状态时执行逻辑。

比如初始error为{error: "", title : ""}，可判断错误内容是否为空：

useEffect(() => {
  if (error.error.trim() !== "") {
    setShowModal(true);
  }
}, [error]);

组件挂载时error是初始空值，不会触发模态框；仅当表单提交后error被更新为有效错误信息时，才会打开模态框。

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