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