freedakgmail
136 lines
2.6 KiB
Markdown
136 lines
2.6 KiB
Markdown
# API 数据验证指南
|
||
|
||
## 问题诊断
|
||
|
||
王氏家族始祖在数据库中正确设置了 `isFounder: true`，但前端可能没有显示。
|
||
|
||
### 数据库验证 ✅
|
||
|
||
```
|
||
王德厚
|
||
isFounder: true
|
||
generation: 1
|
||
tags: 教书先生
|
||
```
|
||
|
||
数据库中的数据是正确的。
|
||
|
||
## 可能的原因
|
||
|
||
### 1. 浏览器缓存
|
||
|
||
**解决方法**：
|
||
- 按 `Cmd + Shift + R` (Mac) 或 `Ctrl + Shift + R` (Windows) 强制刷新
|
||
- 或清除浏览器缓存
|
||
|
||
### 2. 开发服务器需要重启
|
||
|
||
**解决方法**：
|
||
```bash
|
||
# 停止当前服务器 (Ctrl + C)
|
||
# 重新启动
|
||
pnpm dev
|
||
```
|
||
|
||
### 3. TypeScript 类型缓存
|
||
|
||
**解决方法**：
|
||
在 VS Code 中：
|
||
1. 按 `Cmd + Shift + P` (Mac) 或 `Ctrl + Shift + P` (Windows)
|
||
2. 输入 "TypeScript: Restart TS Server"
|
||
3. 回车
|
||
|
||
### 4. 前端状态未更新
|
||
|
||
**解决方法**：
|
||
- 退出登录
|
||
- 重新登录
|
||
- 查看成员列表
|
||
|
||
## 验证步骤
|
||
|
||
### 1. 检查 API 响应
|
||
|
||
打开浏览器开发者工具：
|
||
1. 按 `F12` 打开开发者工具
|
||
2. 切换到 `Network` 标签
|
||
3. 刷新页面
|
||
4. 找到 `/api/trees/[treeId]/members` 请求
|
||
5. 查看响应数据中是否包含 `isFounder` 字段
|
||
|
||
### 2. 检查控制台
|
||
|
||
在浏览器控制台中运行：
|
||
```javascript
|
||
// 查看当前加载的成员数据
|
||
console.log(treeData.members)
|
||
|
||
// 查找始祖成员
|
||
Object.values(treeData.members).filter(m => m.isFounder)
|
||
```
|
||
|
||
### 3. 检查成员列表页面
|
||
|
||
访问成员列表页面，查看：
|
||
- 王德厚的名字前是否有 👑 图标
|
||
- 是否显示"家族始祖"标签（金色）
|
||
|
||
## 快速修复
|
||
|
||
### 方法一：清除所有缓存并重启
|
||
|
||
```bash
|
||
# 1. 停止开发服务器
|
||
# 2. 清除 Next.js 缓存
|
||
rm -rf .next
|
||
|
||
# 3. 重新启动
|
||
pnpm dev
|
||
```
|
||
|
||
### 方法二：重新填充数据库
|
||
|
||
```bash
|
||
npx prisma db seed
|
||
```
|
||
|
||
这会清空并重新创建所有数据，确保 `isFounder` 字段正确。
|
||
|
||
## 预期效果
|
||
|
||
正确显示时，王德厚应该：
|
||
|
||
1. **成员列表页**
|
||
- 名字前有 👑 图标（金色）
|
||
- 显示"家族始祖"标签（金色加粗）
|
||
- 在第1代成员中排在最前面
|
||
|
||
2. **成员详情页**
|
||
- 显示始祖相关信息
|
||
|
||
3. **族谱图**
|
||
- 作为根节点显示
|
||
|
||
## 调试信息
|
||
|
||
如果问题仍然存在，请检查：
|
||
|
||
1. **浏览器控制台错误**
|
||
- 是否有 JavaScript 错误
|
||
- 是否有 API 请求失败
|
||
|
||
2. **Network 请求**
|
||
- API 是否返回了 `isFounder` 字段
|
||
- 数据格式是否正确
|
||
|
||
3. **React DevTools**
|
||
- 检查组件的 props 和 state
|
||
- 确认 `member.isFounder` 的值
|
||
|
||
## 联系支持
|
||
|
||
如果以上方法都无效，请提供：
|
||
- 浏览器控制台截图
|
||
- Network 标签中的 API 响应
|
||
- 具体的错误信息
|