react-component-analyzer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Component Analyzer

React 组件分析器

Analyzes and debugs React/TypeScript component issues in this project.

分析并调试本项目中的React/TypeScript组件问题。

Project Context

项目上下文

Frontend: React 18 with TypeScript
Build tool: Vite
State management: React Query (TanStack Query)
Routing: React Router v6
Styling: Tailwind CSS
Components:
```
frontend/src/components/
```
Pages:
```
frontend/src/pages/
```
Types:
```
frontend/src/types/
```
Services:
```
frontend/src/services/
```

前端：React 18 + TypeScript
构建工具：Vite
状态管理：React Query (TanStack Query)
路由：React Router v6
样式：Tailwind CSS
组件：
```
frontend/src/components/
```
页面：
```
frontend/src/pages/
```
类型定义：
```
frontend/src/types/
```
服务：
```
frontend/src/services/
```

When to Use

使用场景

"Component not rendering"
"Props not being passed"
"State not updating"
"useEffect not firing"
"TypeScript error on component"
"React Query not fetching"
"Infinite re-renders"

"组件不渲染"
"Props未传递"
"状态不更新"
"useEffect未触发"
"组件出现TypeScript错误"
"React Query未发起请求"
"无限重渲染"

Debugging Approach

调试步骤

1. Component Structure

1. 组件结构

Check component file exists and exports correctly
Verify import paths are correct
Check for TypeScript errors in props interface

检查组件文件是否存在并正确导出
验证导入路径是否正确
检查Props接口中的TypeScript错误

2. Props and Types

2. Props与类型

Verify prop types match between parent and child
Check for optional vs required props
Look for type mismatches with API responses

验证父子组件间的Props类型是否匹配
检查可选Props与必填Props的设置
排查类型定义与API响应是否不匹配

3. State and Hooks

3. 状态与Hooks

Check useState/useReducer initial values
Verify useEffect dependencies
Look for missing dependencies causing stale closures
Check useMemo/useCallback usage

检查useState/useReducer的初始值
验证useEffect的依赖项
查找因缺失依赖项导致的闭包过时问题
检查useMemo/useCallback的使用情况

4. React Query Issues

4. React Query 问题排查

Verify query keys are correct
Check enabled/refetch conditions
Look for stale time and cache settings
Verify mutation invalidations

验证查询键（query keys）是否正确
检查enabled/refetch条件设置
查找缓存时间（stale time）和缓存配置问题
验证 mutation 后的查询失效设置

Common Issues

常见问题

Component not rendering:

typescript

// Check: Is it exported correctly?
export default ComponentName;  // or
export { ComponentName };

// Check: Is the route configured?
<Route path="/page" element={<ComponentName />} />

Props type mismatch:

typescript

// Check: Does interface match API response?
interface Project {
  id: number;
  title: string;  // API might return 'name' not 'title'
}

useEffect not firing:

typescript

// Check: Dependencies array
useEffect(() => {
  // This only runs when `id` changes
}, [id]);  // Missing dependency?

React Query stale data:

typescript

// Check: Query invalidation after mutation
const mutation = useMutation({
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['projects'] });
  }
});

组件不渲染：

typescript

// 检查：是否正确导出？
export default ComponentName;  // 或
export { ComponentName };

// 检查：路由是否配置？
<Route path="/page" element={<ComponentName />} />

Props类型不匹配：

typescript

// 检查：接口是否与API响应匹配？
interface Project {
  id: number;
  title: string;  // API可能返回'name'而非'title'
}

useEffect未触发：

typescript

// 检查：依赖项数组
useEffect(() => {
  // 仅在`id`变化时执行
}, [id]);  // 是否缺失依赖项？

React Query 数据过时：

typescript

// 检查：mutation后的查询失效设置
const mutation = useMutation({
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['projects'] });
  }
});

Key Files to Check

重点检查文件

frontend/src/
├── components/
│   ├── common/          # Shared components
│   ├── projects/        # Project-specific components
│   └── ui/              # UI primitives
├── pages/
│   ├── ExplorePage.tsx  # Explore/discovery page
│   ├── ProjectPage.tsx  # Single project view
│   └── DashboardPage.tsx
├── types/
│   ├── models.ts        # Data model types
│   └── api.ts           # API response types
├── services/
│   ├── api.ts           # Axios instance
│   └── projects.ts      # Project API calls
└── hooks/
    └── useProjects.ts   # Custom hooks

frontend/src/
├── components/
│   ├── common/          # 通用组件
│   ├── projects/        # 项目专属组件
│   └── ui/              # UI 基础组件
├── pages/
│   ├── ExplorePage.tsx  # 探索/发现页面
│   ├── ProjectPage.tsx  # 单个项目详情页
│   └── DashboardPage.tsx
├── types/
│   ├── models.ts        # 数据模型类型
│   └── api.ts           # API响应类型
├── services/
│   ├── api.ts           # Axios实例
│   └── projects.ts      # 项目API调用
└── hooks/
    └── useProjects.ts   # 自定义Hooks

Type Checking Tips

类型检查技巧

bash

undefined

bash

undefined

Run TypeScript check

运行TypeScript检查

cd frontend && npx tsc --noEmit

Check specific file

检查特定文件

npx tsc --noEmit src/components/MyComponent.tsx

undefined

npx tsc --noEmit src/components/MyComponent.tsx

undefined

Browser DevTools

浏览器开发者工具

React DevTools: Inspect component tree, props, state
Network tab: Verify API requests/responses
Console: Check for React warnings/errors

React DevTools：检查组件树、Props、状态
网络面板：验证API请求/响应
控制台：查看React警告/错误