fix(hooks): 添加 AbortController 解决竞态条件问题

在以下 Hook 中添加请求取消逻辑,防止快速切换股票时旧数据覆盖新数据:
- useBasicInfo
- useShareholderData
- useManagementData
- useBranchesData
- useAnnouncementsData
- useDisclosureData
- useStockQuoteData

修复前:stockCode 变化时,旧请求可能后返回,覆盖新数据
修复后:cleanup 时取消旧请求,确保数据一致性

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-17 15:20:36 +08:00
parent 35381773bc
commit d60e574e2c
7 changed files with 224 additions and 165 deletions

View File

@@ -73,24 +73,18 @@ export const useStockQuoteData = (stockCode?: string): UseStockQuoteDataResult =
const [basicLoading, setBasicLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// 获取行情数据
const fetchQuote = useCallback(async () => {
if (!stockCode) {
setQuoteData(null);
return;
}
// 用于手动刷新的 ref
const refetchRef = useCallback(async () => {
if (!stockCode) return;
// 获取行情数据
setQuoteLoading(true);
setError(null);
try {
logger.debug('useStockQuoteData', '获取股票行情', { stockCode });
const quotes = await stockService.getQuotes([stockCode]);
// API 返回格式: { [stockCode]: quoteData }
const quoteResult = quotes?.[stockCode] || quotes;
const transformedData = transformQuoteData(quoteResult, stockCode);
logger.debug('useStockQuoteData', '行情数据转换完成', { stockCode, hasData: !!transformedData });
setQuoteData(transformedData);
} catch (err) {
@@ -100,49 +94,85 @@ export const useStockQuoteData = (stockCode?: string): UseStockQuoteDataResult =
} finally {
setQuoteLoading(false);
}
}, [stockCode]);
// 获取基本信息
const fetchBasicInfo = useCallback(async () => {
if (!stockCode) {
setBasicInfo(null);
return;
}
// 获取基本信息
setBasicLoading(true);
try {
const { data: result } = await axios.get(`/api/stock/${stockCode}/basic-info`);
if (result.success) {
setBasicInfo(result.data);
}
} catch (err) {
logger.error('useStockQuoteData', '获取基本信息失败', err);
// 基本信息获取失败不影响主流程,只记录日志
} finally {
setBasicLoading(false);
}
}, [stockCode]);
// stockCode 变化时重新获取数据
// stockCode 变化时重新获取数据(带取消支持)
useEffect(() => {
fetchQuote();
fetchBasicInfo();
}, [fetchQuote, fetchBasicInfo]);
if (!stockCode) {
setQuoteData(null);
setBasicInfo(null);
return;
}
// 手动刷新
const refetch = useCallback(() => {
fetchQuote();
fetchBasicInfo();
}, [fetchQuote, fetchBasicInfo]);
const controller = new AbortController();
let isCancelled = false;
const fetchData = async () => {
// 获取行情数据
setQuoteLoading(true);
setError(null);
try {
logger.debug('useStockQuoteData', '获取股票行情', { stockCode });
const quotes = await stockService.getQuotes([stockCode]);
if (isCancelled) return;
const quoteResult = quotes?.[stockCode] || quotes;
const transformedData = transformQuoteData(quoteResult, stockCode);
logger.debug('useStockQuoteData', '行情数据转换完成', { stockCode, hasData: !!transformedData });
setQuoteData(transformedData);
} catch (err: any) {
if (isCancelled || err.name === 'CanceledError') return;
logger.error('useStockQuoteData', '获取行情失败', err);
setError('获取行情数据失败');
setQuoteData(null);
} finally {
if (!isCancelled) setQuoteLoading(false);
}
// 获取基本信息
setBasicLoading(true);
try {
const { data: result } = await axios.get(`/api/stock/${stockCode}/basic-info`, {
signal: controller.signal,
});
if (isCancelled) return;
if (result.success) {
setBasicInfo(result.data);
}
} catch (err: any) {
if (isCancelled || err.name === 'CanceledError') return;
logger.error('useStockQuoteData', '获取基本信息失败', err);
} finally {
if (!isCancelled) setBasicLoading(false);
}
};
fetchData();
return () => {
isCancelled = true;
controller.abort();
};
}, [stockCode]);
return {
quoteData,
basicInfo,
isLoading: quoteLoading || basicLoading,
error,
refetch,
refetch: refetchRef,
};
};