React+TypeScript中useState未更新及类型错误求助

一、TypeScript报错排查 #

1. 修正publishDraft的类型定义

   • 报错核心是TypeScript误判publishDraft().unwrap()返回void，但实际运行有有效返回值。检查RTK Query中publishDraft这个endpoint的定义：
     • 确认queryFn或query的响应类型被正确声明为包含data字段的对象（比如{ data: { inpay_unique_reference: string; ... } }）。
     • 若为自动生成的类型，检查endpoint的响应类型配置是否准确，避免TypeScript推断错误。
     • 临时验证可使用类型断言：const response = await publishDraft().unwrap() as { data: { inpay_unique_reference: string; debtor_account: any; ... } };，但建议从根源修复类型定义。

2. 消除never类型错误

   • 当TypeScript认为response是void时，!response会触发类型收窄到never，导致response.data不存在。修复publishDraft的类型后，该错误会自动消失。

二、payoutDetails始终为undefined的排查 #

1. 检查getPayoutDetail的返回结构

   • 打印getPayoutDetail的完整返回结果，确认数据结构：

     try {
       const result = await getPayoutDetail(response.data.inpay_unique_reference);
       console.log('getPayoutDetail返回结果:', result); // 查看实际结构
       // 根据实际结构调整取值逻辑
       setPayoutDetails(result.data?.data ?? result.data);
     } catch (error: any) {
       console.error('查询失败:', error);
     }
     

   • RTK Query的useLazyQuery执行函数返回的是包含data、error、isSuccess等字段的对象，而非直接的响应数据。若接口返回是{ data: PayoutDetailData }，则取result.data.data；若接口直接返回PayoutDetailData，则取result.data。

2. 验证useLazyFetchPayoutQuery的用法

   • 确认useLazyFetchPayoutQuery是否为RTK Query标准useLazyQuery的封装。如果是自定义封装，可能需要调用.unwrap()获取实际数据：

     const payoutDetail = await getPayoutDetail(response.data.inpay_unique_reference).unwrap();
     setPayoutDetails(payoutDetail.data);
     

3. 排查调用失败或数据为空情况

   • 检查控制台的error输出，确认getPayoutDetail是否调用失败。
   • 确认查询接口返回的data字段是否存在，若接口本身返回null或undefined，则setPayoutDetails后仍为undefined。

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