vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: user 依赖优化

Browse Source
This commit is contained in:
zdl
2025-10-24 12:19:37 +08:00
parent 5eb4227e29
commit e91656d332
3 changed files with 97 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/Navbars/HomeNavbar.js
View File

@@ -489,6 +489,11 @@ export default function HomeNavbar() {
const brandHover = useColorModeValue('blue.600', 'blue.300');
const toast = useToast();
// ⚡ 提取 userId 为独立变量，避免 user 对象引用变化导致无限循环
const userId = user?.id;
const prevUserIdRef = React.useRef(userId);
const prevIsAuthenticatedRef = React.useRef(isAuthenticated);
// 添加调试信息
logger.debug('HomeNavbar', '组件渲染状态', {
hasUser: !!user,
@@ -727,65 +732,81 @@ export default function HomeNavbar() {
error: error.message
});
}
}, [isAuthenticated, user?.id]); // 只依赖 user.id,避免 user 对象变化导致无限循环
}, [isAuthenticated, userId]); // ⚡ 使用 userId 而不是 user?.id
// 监听用户变化，重置检查标志（用户切换或退出登录时）
React.useEffect(() => {
if (!isAuthenticated || !user) {
// 用户退出登录，重置标志
hasCheckedCompleteness.current = false;
setProfileCompleteness(null);
setShowCompletenessAlert(false);
const userIdChanged = prevUserIdRef.current !== userId;
const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
if (userIdChanged || authChanged) {
prevUserIdRef.current = userId;
prevIsAuthenticatedRef.current = isAuthenticated;
if (!isAuthenticated || !user) {
// 用户退出登录，重置标志
hasCheckedCompleteness.current = false;
setProfileCompleteness(null);
setShowCompletenessAlert(false);
}
}
}, [isAuthenticated, user?.id]); // 监听用户 ID 变化
}, [isAuthenticated, userId, user]); // ⚡ 使用 userId
// 用户登录后检查资料完整性
React.useEffect(() => {
if (isAuthenticated && user) {
const userIdChanged = prevUserIdRef.current !== userId;
const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
if ((userIdChanged || authChanged) && isAuthenticated && user) {
// 延迟检查，避免过于频繁
const timer = setTimeout(checkProfileCompleteness, 1000);
return () => clearTimeout(timer);
}
}, [isAuthenticated, user?.id, checkProfileCompleteness]); // 只依赖 user.id,避免无限循环
}, [isAuthenticated, userId, checkProfileCompleteness, user]); // ⚡ 使用 userId
// 加载订阅信息
React.useEffect(() => {
if (isAuthenticated && user) {
const loadSubscriptionInfo = async () => {
try {
const base = getApiBase();
const response = await fetch(base + '/api/subscription/current', {
credentials: 'include',
});
if (response.ok) {
const data = await response.json();
if (data.success && data.data) {
// 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
const normalizedData = {
type: (data.data.type || data.data.subscription_type || 'free').toLowerCase(),
status: data.data.status || 'active',
days_left: data.data.days_left || 0,
is_active: data.data.is_active !== false,
end_date: data.data.end_date || null
};
setSubscriptionInfo(normalizedData);
const userIdChanged = prevUserIdRef.current !== userId;
const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
if (userIdChanged || authChanged) {
if (isAuthenticated && user) {
const loadSubscriptionInfo = async () => {
try {
const base = getApiBase();
const response = await fetch(base + '/api/subscription/current', {
credentials: 'include',
});
if (response.ok) {
const data = await response.json();
if (data.success && data.data) {
// 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
const normalizedData = {
type: (data.data.type || data.data.subscription_type || 'free').toLowerCase(),
status: data.data.status || 'active',
days_left: data.data.days_left || 0,
is_active: data.data.is_active !== false,
end_date: data.data.end_date || null
};
setSubscriptionInfo(normalizedData);
}
}
} catch (error) {
logger.error('HomeNavbar', '加载订阅信息失败', error);
}
} catch (error) {
logger.error('HomeNavbar', '加载订阅信息失败', error);
}
};
loadSubscriptionInfo();
} else {
// 用户未登录时,重置为免费版
setSubscriptionInfo({
type: 'free',
status: 'active',
days_left: 0,
is_active: true
});
};
loadSubscriptionInfo();
} else {
// 用户未登录时,重置为免费版
setSubscriptionInfo({
type: 'free',
status: 'active',
days_left: 0,
is_active: true
});
}
}
}, [isAuthenticated, user?.id]); // 只依赖 user.id 而不是整个 user 对象
}, [isAuthenticated, userId, user]); // ⚡ 使用 userId，防重复通过 ref 判断
return (
<>