fix(ui): 修掉 LoginTasksPage 的 hooks 顺序告警(eslint 由红转绿)

`setTaskSummary` 在 useEffect 里被使用(约 259 行),但它的 useState 声明在
约 420 行 —— eslint `react-hooks/immutability` 判为「访问了尚未声明的变量」。
这是 main 上就存在的历史问题,会让 `npm run lint` 失败。

**运行时其实不会踩 TDZ**(useEffect 在渲染后执行、且内部是 async,等到真正调用
setter 时声明早已执行完),但**声明与使用相隔 160 行**本身就是隐患:任何一次
把调用改成同步、或把 effect 往上移的重构都会真的炸。

处理:把 useState 声明移到任务相关 state 区块(taskPage / taskStatus / taskTotal
旁边)—— 既满足规则,也让这组状态聚在一起。先确认过**组件在声明之前没有任何
早期 return**,所以上移不会改变 hooks 的调用顺序。

验证:
- `npx eslint src/pages/LoginTasksPage.tsx` → 0 errors(原本 1 error)
- `npm run lint` → **exit 0**(29 个 warning 是既有的 react-refresh 提示,未动)
- `npm run build`(tsc -b && vite build)通过
This commit is contained in:
yml2213
2026-10-04 14:52:05 +08:00
parent 1a8710834a
commit fbab805610
+3 -3
View File
@@ -99,6 +99,9 @@ export default function LoginTasksPage() {
});
const [taskStatus, setTaskStatus] = useState<string>('');
const [taskTotal, setTaskTotal] = useState(0);
// 全局统计走 /tasks/summary:分页后 tasks 只是当前页,
// 用它算「成功/失败」会和「共 N 个任务」对不上(曾显示「共 8508,成功 48」)。
const [taskSummary, setTaskSummary] = useState<TaskSummary | null>(null);
useEffect(() => { localStorage.setItem('login_task_page_size', String(taskPageSize)); }, [taskPageSize]);
const { logs, connected: wsConnected, connect: connectLogs } = useWebSocketLogs();
const { can } = usePermissions();
@@ -415,9 +418,6 @@ export default function LoginTasksPage() {
setSelectedRowKeys([]);
};
// 全局统计走 /tasks/summary:分页后 tasks 只是当前页,
// 用它算「成功/失败」会和「共 N 个任务」对不上(曾显示「共 8508,成功 48」)。
const [taskSummary, setTaskSummary] = useState<TaskSummary | null>(null);
const successCount = taskSummary?.success ?? 0;
const failedCount = taskSummary?.failed ?? 0;
const checkedCount = tasks.filter((t) => [