React错误处理：.catch()外部errorMessage未定义问题解决

1. errorMessage用普通let声明，不属于React状态，更新它不会触发组件重新渲染，对话框内容无法感知到它的变化。
2. 对话框的content是在onClickSave执行时生成的静态JSX闭包，它捕获的是当时的isError和errorMessage值，后续状态更新不会让这个JSX重新渲染。
3. 即使调用setIsError(true)更新了状态，但因为对话框内容已经通过setDialog固定，组件重新渲染时也不会同步更新对话框里的内容。

步骤1：将错误信息转为React状态 #

把errorMessage改成useState管理，让它的变化能触发组件重新渲染：

const [isError, setIsError] = useState(false);
const [errorMessage, setErrorMessage] = useState(''); // 改用useState

步骤2：让对话框内容依赖实时状态 #

不要在onClickSave里生成静态JSX，而是让对话框内容直接绑定组件的实时状态。如果你的对话框支持动态更新，推荐把对话框渲染逻辑移到组件的主JSX中，通过状态控制显示：

const [showDialog, setShowDialog] = useState(false);
const [isError, setIsError] = useState(false);
const [errorMessage, setErrorMessage] = useState('');

const onClickSave = () => {
  // 打开对话框前重置错误状态
  setIsError(false);
  setErrorMessage('');
  setShowDialog(true);
};

const handleSave = async () => {
  try {
    await onSave();
    setShowDialog(false); // 保存成功关闭对话框
  } catch ({ error }) {
    setErrorMessage(error);
    setIsError(true); // 更新错误状态，触发对话框重新渲染
  }
};

// 在组件主JSX中渲染对话框
return (
  <>
    {/* 其他组件内容 */}
    <button onClick={onClickSave}>打开保存确认框</button>

    {showDialog && (
      <div className="dialog-container">
        <div>
          <h1 className="text-xl">Confirmation</h1>
          <p className="text-md">Are you sure you want to save?</p>
          {isError && <p className='text-md text-red-500'>{errorMessage}</p>}
          <div className="flex justify-end gap-2">
            <button onClick={() => setShowDialog(false)}>Cancel</button>
            <SubmitButton
              loadingContent="Saving"
              onClick={handleSave}>
              Save
            </SubmitButton>
          </div>
        </div>
      </div>
    )}
  </>
);

如果必须保留setDialog的调用方式，需要在捕获错误后重新调用setDialog更新内容，确保对话框能拿到最新的状态值：

const [isError, setIsError] = useState(false);
const [errorMessage, setErrorMessage] = useState('');

const onClickSave = () => {
  setIsError(false);
  setErrorMessage('');
  
  const renderDialogContent = () => (
    <div>
      <h1 className="text-xl">Confirmation</h1>
      <p className="text-md">Are you sure you want to save?</p>
      {isError && <p className='text-md text-red-500'>{errorMessage}</p>}
      <div className="flex justify-end gap-2">
        <button onClick={() => setDialog()}>Cancel</button>
        <SubmitButton
          loadingContent="Saving"
          onClick={async () => {
            try {
              await onSave();
              setDialog();
            } catch ({ error }) {
              setErrorMessage(error);
              setIsError(true);
              // 重新调用setDialog更新内容
              setDialog({ content: renderDialogContent });
            }
          }}>
          Save
        </SubmitButton>
      </div>
    </div>
  );

  setDialog({ content: renderDialogContent });
};

关键注意点 #

• 始终用useState管理需要驱动UI变化的数据，普通变量无法触发React的重新渲染机制。
• 避免在事件回调中生成静态JSX闭包，尽量让UI直接依赖组件的实时状态，这样状态更新时UI会自动同步。
• 改用try/catch处理异步错误，比链式.catch()更直观，流程控制更清晰。

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