fix: pass initial count to hooks for correct optimistic update

- Add initialLikeCount and initialFavoriteCount parameters
- Use item.likeCount/item.favoriteCount as fallback
- Fixes issue where count resets to 0 on first click
This commit is contained in:
imeepos 2026-01-28 20:14:45 +08:00
parent 458027934a
commit 0d83020926
3 changed files with 14 additions and 13 deletions

View File

@ -92,8 +92,8 @@ export const VideoItem = memo(({ item, videoHeight }: { item: TemplateDetail; vi
const favoriteCount = useTemplateFavoriteCount(item.id) ?? item.favoriteCount const favoriteCount = useTemplateFavoriteCount(item.id) ?? item.favoriteCount
// 使用 hooks 获取操作函数 // 使用 hooks 获取操作函数
const { like: onLike, unlike: onUnlike, loading: likeLoading } = useTemplateLike(item.id) const { like: onLike, unlike: onUnlike, loading: likeLoading } = useTemplateLike(item.id, item.likeCount)
const { favorite: onFavorite, unfavorite: onUnfavorite, loading: favoriteLoading } = useTemplateFavorite(item.id) const { favorite: onFavorite, unfavorite: onUnfavorite, loading: favoriteLoading } = useTemplateFavorite(item.id, false, item.favoriteCount)
const handleImageLoad = useCallback((event: ImageLoadEventData) => { const handleImageLoad = useCallback((event: ImageLoadEventData) => {
const { source } = event const { source } = event

View File

@ -16,6 +16,7 @@ import { templateSocialStore } from '@/stores/templateSocialStore'
export const useTemplateFavorite = ( export const useTemplateFavorite = (
templateId?: string, templateId?: string,
initialFavorited = false, initialFavorited = false,
initialFavoriteCount?: number,
) => { ) => {
const [loading, setLoading] = useState<boolean>(false) const [loading, setLoading] = useState<boolean>(false)
const [error, setError] = useState<ApiError | null>(null) const [error, setError] = useState<ApiError | null>(null)
@ -29,7 +30,7 @@ export const useTemplateFavorite = (
setError(null) setError(null)
// 乐观更新:立即更新状态 // 乐观更新:立即更新状态
const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? 0 const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? initialFavoriteCount ?? 0
templateSocialStore.setFavorited(templateId, true) templateSocialStore.setFavorited(templateId, true)
templateSocialStore.setFavoriteCount(templateId, currentCount + 1) templateSocialStore.setFavoriteCount(templateId, currentCount + 1)
@ -58,7 +59,7 @@ export const useTemplateFavorite = (
} }
return { data, error: null } return { data, error: null }
}, [templateId]) }, [templateId, initialFavoriteCount])
const unfavorite = useCallback(async () => { const unfavorite = useCallback(async () => {
if (!templateId) { if (!templateId) {
@ -69,7 +70,7 @@ export const useTemplateFavorite = (
setError(null) setError(null)
// 乐观更新:立即更新状态 // 乐观更新:立即更新状态
const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? 0 const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? initialFavoriteCount ?? 0
templateSocialStore.setFavorited(templateId, false) templateSocialStore.setFavorited(templateId, false)
templateSocialStore.setFavoriteCount(templateId, Math.max(0, currentCount - 1)) templateSocialStore.setFavoriteCount(templateId, Math.max(0, currentCount - 1))
@ -98,7 +99,7 @@ export const useTemplateFavorite = (
} }
return { data, error: null } return { data, error: null }
}, [templateId]) }, [templateId, initialFavoriteCount])
const checkFavorited = useCallback(async () => { const checkFavorited = useCallback(async () => {
if (!templateId) { if (!templateId) {
@ -129,7 +130,7 @@ export const useTemplateFavorite = (
} }
return { data, error: null } return { data, error: null }
}, [templateId]) }, [templateId, initialFavoriteCount])
return { return {
loading, loading,

View File

@ -6,7 +6,7 @@ import { type ApiError } from '@/lib/types'
import { handleError } from './use-error' import { handleError } from './use-error'
import { templateSocialStore } from '@/stores/templateSocialStore' import { templateSocialStore } from '@/stores/templateSocialStore'
export const useTemplateLike = (templateId?: string) => { export const useTemplateLike = (templateId?: string, initialLikeCount?: number) => {
const [loading, setLoading] = useState<boolean>(false) const [loading, setLoading] = useState<boolean>(false)
const [error, setError] = useState<ApiError | null>(null) const [error, setError] = useState<ApiError | null>(null)
@ -19,7 +19,7 @@ export const useTemplateLike = (templateId?: string) => {
setError(null) setError(null)
// 乐观更新:立即更新状态 // 乐观更新:立即更新状态
const currentCount = templateSocialStore.getLikeCount(templateId) ?? 0 const currentCount = templateSocialStore.getLikeCount(templateId) ?? initialLikeCount ?? 0
templateSocialStore.setLiked(templateId, true) templateSocialStore.setLiked(templateId, true)
templateSocialStore.setLikeCount(templateId, currentCount + 1) templateSocialStore.setLikeCount(templateId, currentCount + 1)
@ -44,7 +44,7 @@ export const useTemplateLike = (templateId?: string) => {
} }
return {} return {}
}, [templateId]) }, [templateId, initialLikeCount])
const unlike = useCallback(async (): Promise<{ error?: ApiError }> => { const unlike = useCallback(async (): Promise<{ error?: ApiError }> => {
if (!templateId) { if (!templateId) {
@ -55,7 +55,7 @@ export const useTemplateLike = (templateId?: string) => {
setError(null) setError(null)
// 乐观更新:立即更新状态 // 乐观更新:立即更新状态
const currentCount = templateSocialStore.getLikeCount(templateId) ?? 0 const currentCount = templateSocialStore.getLikeCount(templateId) ?? initialLikeCount ?? 0
templateSocialStore.setLiked(templateId, false) templateSocialStore.setLiked(templateId, false)
templateSocialStore.setLikeCount(templateId, Math.max(0, currentCount - 1)) templateSocialStore.setLikeCount(templateId, Math.max(0, currentCount - 1))
@ -80,7 +80,7 @@ export const useTemplateLike = (templateId?: string) => {
} }
return {} return {}
}, [templateId]) }, [templateId, initialLikeCount])
const checkLiked = useCallback(async (): Promise<{ error?: ApiError }> => { const checkLiked = useCallback(async (): Promise<{ error?: ApiError }> => {
if (!templateId) { if (!templateId) {
@ -106,7 +106,7 @@ export const useTemplateLike = (templateId?: string) => {
templateSocialStore.setLiked(templateId, data.liked) templateSocialStore.setLiked(templateId, data.liked)
} }
return {} return {}
}, [templateId]) }, [templateId, initialLikeCount])
return { return {
loading, loading,