Mirrors/suanming
1
0
Fork 0
mirror of https://github.com/patdelphi/suanming.git synced 2026-02-28 05:33:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve TypeScript and React Hooks issues

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

315
dist/assets/index-CipkF_Jj.js → dist/assets/index-DLB9yhkX.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index.es-DENWjgEg.js → dist/assets/index.es-DolsardD.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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"> <link rel="stylesheet" crossorigin href="/assets/index-e9aiQwGl.css">
</head> </head>

22
src/components/CompleteBaziAnalysis.tsx
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 { 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 { 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'; import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
@@ -120,9 +120,7 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
// 输入验证 // 输入验证
const validation = validateBirthDate(birthDate); const validation = validateBirthDate(birthDate);
if (!validation.isValid) { const isValidInput = validation.isValid;
return <ErrorDisplay error={validation.error!} />;
}
// 五行颜色配置 // 五行颜色配置
const elementColors: { [key: string]: string } = { const elementColors: { [key: string]: string } = {
@@ -158,7 +156,7 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
}; };
// 分析数据获取函数 // 分析数据获取函数
const fetchAnalysisData = async () => { const fetchAnalysisData = useCallback(async () => {
try { try {
setIsLoading(true); setIsLoading(true);
setError(null); setError(null);
@@ -189,9 +187,14 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}; }, [birthDate.name, birthDate.date, birthDate.time, birthDate.gender]);
useEffect(() => { useEffect(() => {
// 如果输入无效，不执行分析
if (!isValidInput) {
return;
}
// 如果已经有分析数据，直接使用 // 如果已经有分析数据，直接使用
if (propAnalysisData) { if (propAnalysisData) {
setAnalysisData(propAnalysisData); setAnalysisData(propAnalysisData);
@@ -202,7 +205,12 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
if (birthDate?.date && !propAnalysisData) { if (birthDate?.date && !propAnalysisData) {
fetchAnalysisData(); 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) { if (isLoading) {