基于T3 Stack，不使用useEffect等待useMutation状态触发弹窗

方法一：使用mutateAsync + async/await直接处理 #

直接在点击事件的异步函数中调用mutateAsync，通过try/catch捕获错误并判断401状态：

import { TRPCError } from '@trpc/server';
import { useRef } from 'react';

// 组件内逻辑
const apiResult = api.story.generateStory.useMutation();
const modalRef = useRef<HTMLDialogElement>(null);

// 点击事件处理函数
const handleGenerateStory = async (passedData: YourDataType) => {
  try {
    // 调用异步版本的mutation
    await apiResult.mutateAsync(passedData);
    // 可选：执行成功后的逻辑
  } catch (error) {
    // 精准判断是否为tRPC的401未授权错误
    if (error instanceof TRPCError && error.code === 'UNAUTHORIZED') {
      modalRef.current?.showModal();
    }
    // 可选：处理其他类型错误
  }
};

// 组件渲染
return (
  <>
    <button onClick={() => handleGenerateStory(yourData)}>生成故事</button>
    <dialog ref={modalRef}>
      <p>登录已过期，请重新登录</p>
      {/* 自定义弹窗内容 */}
    </dialog>
  </>
);

方法二：使用mutate的配置参数onError #

在调用mutate时传入第二个配置对象，直接指定错误处理逻辑：

import { TRPCError } from '@trpc/server';
import { useRef } from 'react';

// 组件内逻辑
const apiResult = api.story.generateStory.useMutation();
const modalRef = useRef<HTMLDialogElement>(null);

// 点击事件处理函数
const handleGenerateStory = (passedData: YourDataType) => {
  apiResult.mutate(passedData, {
    onError: (error) => {
      // 判断是否为401未授权错误
      if (error instanceof TRPCError && error.code === 'UNAUTHORIZED') {
        modalRef.current?.showModal();
      }
    },
    // 可选：配置onSuccess处理成功回调
  });
};

// 组件渲染
return (
  <>
    <button onClick={() => handleGenerateStory(yourData)}>生成故事</button>
    <dialog ref={modalRef}>
      <p>登录已过期，请重新登录</p>
      {/* 自定义弹窗内容 */}
    </dialog>
  </>
);

关键说明 #

• 两种方案均无需使用useEffect，直接在点击事件或mutation回调内完成错误处理
• 借助TRPCError类型守卫精准筛选401错误，避免误触发弹窗
• 请替换YourDataType为你项目中实际的参数类型，按需调整弹窗样式与内容

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