fix: resolve TypeScript and React Hooks issues

- Fixed React Hooks rules violation in CompleteBaziAnalysis component
- Moved useEffect after input validation to prevent conditional Hook calls
- Added useCallback to fetchAnalysisData function for proper dependency management
- Resolved ESLint warnings about missing dependencies
- Ensured all Hooks are called in the same order on every render
- Improved component structure for better error handling
This commit is contained in:
patdelphi
2025-08-24 13:57:07 +08:00
parent 936f961c7d
commit b5b1736b88
4 changed files with 177 additions and 164 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" crossorigin src="/assets/index-CipkF_Jj.js"></script>
<script type="module" crossorigin src="/assets/index-DLB9yhkX.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-e9aiQwGl.css">
</head>

View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, ErrorInfo } from 'react';
import React, { useState, useEffect, useCallback, ErrorInfo } from 'react';
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';
import { Calendar, Star, BookOpen, Sparkles, User, BarChart3, Zap, TrendingUp, Loader2, Clock, Target, Heart, DollarSign, Activity, AlertTriangle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
@@ -120,9 +120,7 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
// 输入验证
const validation = validateBirthDate(birthDate);
if (!validation.isValid) {
return <ErrorDisplay error={validation.error!} />;
}
const isValidInput = validation.isValid;
// 五行颜色配置
const elementColors: { [key: string]: string } = {
@@ -158,7 +156,7 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
};
// 分析数据获取函数
const fetchAnalysisData = async () => {
const fetchAnalysisData = useCallback(async () => {
try {
setIsLoading(true);
setError(null);
@@ -189,9 +187,14 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
} finally {
setIsLoading(false);
}
};
}, [birthDate.name, birthDate.date, birthDate.time, birthDate.gender]);
useEffect(() => {
// 如果输入无效,不执行分析
if (!isValidInput) {
return;
}
// 如果已经有分析数据,直接使用
if (propAnalysisData) {
setAnalysisData(propAnalysisData);
@@ -202,7 +205,12 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
if (birthDate?.date && !propAnalysisData) {
fetchAnalysisData();
}
}, [birthDate?.date, birthDate?.time, birthDate?.name, birthDate?.gender, propAnalysisData]);
}, [birthDate?.date, birthDate?.time, birthDate?.name, birthDate?.gender, propAnalysisData, isValidInput, fetchAnalysisData]);
// 输入验证失败时的早期返回
if (!isValidInput) {
return <ErrorDisplay error={validation.error!} />;
}
// 渲染加载状态
if (isLoading) {