4.7 KiB

Raw Permalink Blame History

ProjectMaterialsCenter.tsx 错误修复

问题描述

ProjectMaterialsCenter.tsx 组件在使用新的 ResourceCategoryServiceV2 时出现了类型错误，主要问题是：

新的 API 直接返回 ResourceCategoryV2[] 数组，而不是包装在响应对象中
代码仍然使用旧的响应格式 response.status 和 response.data
TypeScript 类型检查失败

错误详情

原始错误代码

const loadCategories = async () => {
  setLoadingCategories(true)
  try {
    const response = await ResourceCategoryService.getAllCategories()
    if (response.status && response.data) {  // ❌ 错误：response 是数组，没有 status 和 data 属性
      setCategories(response.data.filter(cat => cat.is_active))  // ❌ 错误：response.data 不存在
    }
  } catch (error) {
    console.error('Failed to load categories:', error)
  } finally {
    setLoadingCategories(false)
  }
}

TypeScript 错误信息

L49-49: Property 'status' does not exist on type 'ResourceCategoryV2[]'.
L49-49: Property 'data' does not exist on type 'ResourceCategoryV2[]'.
L50-50: Property 'data' does not exist on type 'ResourceCategoryV2[]'.
L50-50: Parameter 'cat' implicitly has an 'any' type.

修复方案

1. 更新导入语句

// 修复前
import { ResourceCategory, ResourceCategoryService } from '../services/resourceCategoryService'

// 修复后
import { ResourceCategoryV2 as ResourceCategory, ResourceCategoryServiceV2 as ResourceCategoryService } from '../services/resourceCategoryServiceV2'

2. 修复 API 调用

// 修复后的代码
const loadCategories = async () => {
  setLoadingCategories(true)
  try {
    const categories = await ResourceCategoryService.getAllCategories()
    // 过滤出活跃的分类
    setCategories(categories.filter((cat: ResourceCategory) => cat.is_active))
  } catch (error) {
    console.error('Failed to load categories:', error)
    // 如果加载失败，设置为空数组
    setCategories([])
  } finally {
    setLoadingCategories(false)
  }
}

主要变化

1. API 响应格式变化

旧版本	新版本
`{ status: boolean, data: ResourceCategory[] }`	`ResourceCategoryV2[]`
需要检查 `response.status`	直接使用返回的数组
使用 `response.data`	直接使用返回值

2. 错误处理改进

// 新增：加载失败时设置空数组
catch (error) {
  console.error('Failed to load categories:', error)
  setCategories([])  // 确保组件不会因为数据为 undefined 而崩溃
}

3. 类型安全

// 明确指定类型，避免隐式 any
categories.filter((cat: ResourceCategory) => cat.is_active)

兼容性说明

向后兼容

通过使用别名导入，保持了组件内部代码的一致性：

import { 
  ResourceCategoryV2 as ResourceCategory, 
  ResourceCategoryServiceV2 as ResourceCategoryService 
} from '../services/resourceCategoryServiceV2'

这样做的好处：

组件内部代码无需大量修改
类型名称保持一致
服务调用方式保持一致

功能增强

新版本 API 提供了更多功能：

用户权限管理
云端分类支持
更好的错误处理
统一的响应格式

测试验证

创建了 ProjectMaterialsCenter.test.tsx 来验证修复：

分类加载测试：验证正确加载和过滤活跃分类
错误处理测试：验证加载失败时的错误处理
数量计算测试：验证分类素材数量计算正确
加载状态测试：验证加载状态显示
API 集成测试：验证使用正确的新 API

运行测试

# 运行单个组件测试
npm test ProjectMaterialsCenter.test.tsx

# 运行所有测试
npm test

修复验证

1. TypeScript 编译

npx tsc --noEmit

应该没有类型错误。

2. ESLint 检查

npx eslint src/components/ProjectMaterialsCenter.tsx

应该没有 linting 错误。

3. 功能测试

在浏览器中测试：

分类正确加载
分类筛选功能正常
错误情况下不会崩溃

总结

通过这次修复：

✅ 解决了 TypeScript 类型错误 ✅ 更新到最新的 API ✅ 改进了错误处理 ✅ 保持了向后兼容性 ✅ 添加了完整的测试覆盖

组件现在可以正确使用新的 ResourceCategoryServiceV2 API，同时保持了原有的功能和用户体验。

4.7 KiB Raw Permalink Blame History Unescape Escape