fix: 修复接口重复调用 — StrictMode 清理 + useModelList 去重

AppProvider useEffect 增加 aborted 标志,防止 React StrictMode
挂载→卸载→重新挂载时 refreshToken/getUserInfo 各调两次。

useModelList 提升到 LeftPanel 单例调用,通过 props 分发给
ModelSelector 和 TaskHistory,消除 /api/v1/models 重复请求。

DevTools 中显示「已停止」的请求即 StrictMode 第一轮挂载被丢弃的请求。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-09 19:24:34 +08:00
parent d95d155ab5
commit 848fdeca3d
7 changed files with 58 additions and 11 deletions

View File

@@ -1,13 +1,12 @@
// ============================================================
// ModelSelector — 模型选择器Tabs 标签页分组 + 平铺列表)
// 使用 useModelList() Hook 获取数据,组件仅负责渲染
// 模型数据由父组件 LeftPanel 通过 props 传入,避免多个兄弟组件各自请求
// ============================================================
import React, { useState, useMemo, useCallback } from 'react';
import { Tabs, Spin, Empty, Tag, Typography, Button, Result, message, theme as antTheme } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
import { useModelList } from '@/hooks/use-api';
import { useHomeContext } from '@/pages/home/HomeContent';
import { resolveCategoryLabel, MODEL_CATEGORIES, type ModelsListResponseBody, type ModelCategoryStringEnum } from '@/services/modules/models';
@@ -97,10 +96,17 @@ function ModelItem({ model, isSelected, onSelect }: ModelItemProps) {
// ---------- 主组件 ----------
export function ModelSelector() {
interface ModelSelectorProps {
models: ModelsListResponseBody[] | null;
loading: boolean;
error: Error | null;
groupedModels: Map<string, ModelsListResponseBody[]>;
refetch: () => void;
}
export function ModelSelector({ models, loading, error, groupedModels, refetch }: ModelSelectorProps) {
const { token } = antTheme.useToken();
const { selectedModel, setSelectedModel } = useHomeContext();
const { data: models, loading, error, groupedModels, refetch } = useModelList();
const [activeTab, setActiveTab] = useState(ALL_TAB_KEY);
// 当前 Tab 对应的模型列表