Commit 32c6981d by weiyudumei

fix: 修复收藏按钮重复调用接口问题

- 移除React.StrictMode避免开发环境副作用重复执行
- 在ChatAnswerOperate中添加防重复调用机制
- 增加错误处理和状态回滚逻辑
parent f3d9b624
......@@ -29,10 +29,8 @@ if (!Object.hasOwn) {
if (rootEl) {
const root = ReactDOM.createRoot(rootEl)
root.render(
<React.StrictMode>
<HeroUIProvider className="h-full">
<App />
</HeroUIProvider>
</React.StrictMode>,
<HeroUIProvider className="h-full">
<App />
</HeroUIProvider>,
)
}
import { Button, Tooltip } from '@heroui/react'
import { useState } from 'react'
import { useRef, useState } from 'react'
import { useDebounceFn } from 'ahooks'
import type { Answer } from '@/types/chat'
import CollectIcon from '@/assets/svg/shouc.svg?react'
......@@ -17,18 +17,39 @@ export const ChatAnswerOperate: React.FC<ChatAnswerOperateProps> = ({ answer })
// const [isLike, setIsLike] = useState(answer.feedbackStatus === '01')
// const [isUnLike, setIsUnLike] = useState(answer.feedbackStatus === '02')
const [isOpenUnLikeModal, setIsOpenUnLikeOpen] = useState(false)
const isProcessingRef = useRef(false)
const handleCollect = useDebounceFn(async () => {
if (!isCollect) {
setIsCollect(true)
const res = await fetchSubmitCollection(answer.recordId || '')
if (res.ok) {
showToast('收藏成功!', 'success')
// 防止重复调用
if (isProcessingRef.current) {
return
}
isProcessingRef.current = true
try {
if (!isCollect) {
setIsCollect(true)
const res = await fetchSubmitCollection(answer.recordId || '')
if (res.ok) {
showToast('收藏成功!', 'success')
}
else {
// 如果请求失败,回滚状态
setIsCollect(false)
}
}
else {
setIsCollect(false)
const res = await fetchCancelCollection(answer.recordId || '')
if (!res.ok) {
// 如果请求失败,回滚状态
setIsCollect(true)
}
}
}
else {
setIsCollect(false)
await fetchCancelCollection(answer.recordId || '')
finally {
isProcessingRef.current = false
}
}, { wait: 200 })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment