37 lines
1.2 KiB
Markdown
37 lines
1.2 KiB
Markdown
# FoodDetailModal 弹窗问题修复记录
|
|
|
|
## 问题描述
|
|
FoodDetailModal弹窗打开后没有内容显示
|
|
|
|
## 问题分析
|
|
1. **导入路径问题**: 原来FoodDetailModal试图从已删除的FoodLibraryModal导入FoodItem类型
|
|
2. **类型定义冲突**: FoodItem类型在多个文件中重复定义
|
|
3. **Modal嵌套问题**: 已通过将食物库改为页面解决
|
|
|
|
## 修复步骤
|
|
|
|
### 1. 修复类型导入问题
|
|
- 在FoodDetailModal.tsx中重新定义FoodItem接口
|
|
- 在food-library.tsx中从FoodDetailModal导入FoodItem类型
|
|
- 更新food模块的导出文件
|
|
|
|
### 2. 添加调试信息
|
|
- 在FoodDetailModal中添加console.log来跟踪数据传递
|
|
- 在food-library.tsx中添加调试信息来确认食物选择逻辑
|
|
|
|
### 3. 确保正确的数据流
|
|
```
|
|
用户点击食物 -> handleSelectFood -> setSelectedFood + setShowFoodDetail -> FoodDetailModal接收props
|
|
```
|
|
|
|
## 测试方法
|
|
1. 打开食物库页面
|
|
2. 点击任意食物的加号按钮
|
|
3. 检查控制台输出，确认数据传递正确
|
|
4. 确认弹窗显示完整内容
|
|
|
|
## 预期结果
|
|
- 弹窗正常显示食物信息
|
|
- 营养数据正确计算和显示
|
|
- 单位选择功能正常
|
|
- 保存功能正常工作 |