Redux Toolkit Query请求完成后组件未重新渲染问题排查

1. 补充useFetchAccountQuery的状态处理 #

你当前仅获取了accountData，但未处理请求的pending/error状态：

• 当账户数据还在请求中时，accountData为undefined，此时paramsAreGood为false，交易请求会被skipToken跳过。
• 如果账户数据请求失败，accountData会一直处于undefined，交易请求永远无法触发。

可以添加状态判断，避免组件在账户数据未就绪时卡住：

const { data: accountData, isLoading: accountLoading, isError: accountError } = useFetchAccountQuery();

if (accountLoading) return <div>加载账户数据中...</div>;
if (accountError) return <div>加载账户数据失败</div>;

2. 完善交易请求的状态监听 #

使用skipToken时，useFetchTransactionsQuery的isSuccess会保持false。当accountData就绪后，paramsAreGood变为true，交易请求发起，需要等待请求完成后isSuccess才会变为true。

可以添加交易请求的状态提示，同时确保transactions存在：

const { data: transactions, isSuccess: transactionsSuccess, isLoading: transactionsLoading, isError: transactionsError } = useFetchTransactionsQuery(paramsAreGood ? params : skipToken);

if (transactionsLoading) return <div>加载交易数据中...</div>;
if (transactionsError) return <div>加载交易数据失败</div>;

3. 缓存params对象避免不必要的重复请求 #

每次组件渲染时，你都会创建新的params对象，这会让useFetchTransactionsQuery误认为参数变化，触发无意义的重新请求。可以用useMemo缓存参数：

import { useMemo } from 'react';

// ...

const params = useMemo(() => ({
  accountId: accountData?.accountId,
  categoryId: accountData?.defaultCategoryId,
  changesSince,
}), [accountData, changesSince]);

const paramsAreGood = !!params.accountId && !!params.categoryId;

4. 确认transactions的数据结构 #

Chrome网络面板显示请求成功，但要检查返回的transactions是否为数组：

• 如果接口返回嵌套结构（比如{ data: [...] }），需要从transactions.data取长度，而非直接用transactions.length。
• 可以在组件中打印数据确认结构：

console.log('交易数据:', transactions);

5. 核对Redux DevTools中的状态 #

从Redux DevTools中确认：

• useFetchAccountQuery是否成功将账户数据存入store。
• useFetchTransactionsQuery的缓存中是否存在返回的交易数据，以及isSuccess状态是否为true。

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