diff --git a/src/components/Comments/index.tsx b/src/components/Comments/index.tsx index 466f153..e6706f5 100644 --- a/src/components/Comments/index.tsx +++ b/src/components/Comments/index.tsx @@ -249,13 +249,18 @@ export default forwardRef(function Comments( const [comments, setComments] = useState([]); const inputRef = useRef(null); + const commentCountUpdateRef = useRef() + useEffect(() => { getComments(1); }, [game_id]); useImperativeHandle(ref, () => ({ addComment: handleReply, - getCommentCount: () => comments.length, + getCommentCount: (onUpdate) => { + commentCountUpdateRef.current = onUpdate + onUpdate(comments.length) + }, })); async function getComments(page) { @@ -270,6 +275,7 @@ export default forwardRef(function Comments( setComments((prev) => { const res = [...prev]; res.splice(page * PAGESIZE - 1, newComments.length, ...newComments); + commentCountUpdateRef.current?.(res.length) return res; }); } @@ -297,6 +303,7 @@ export default forwardRef(function Comments( item.reply_count = res.data.count; } }); + commentCountUpdateRef.current?.(newComments.length) return newComments; }); } @@ -318,6 +325,7 @@ export default forwardRef(function Comments( const res = await CommentServices.createComment({ game_id, content: val }); if (res.code === 0) { setComments((prev) => { + commentCountUpdateRef.current?.(prev.length + 1) return [{ ...res.data, replies: [] }, ...prev]; }); toast("发布成功"); @@ -367,7 +375,7 @@ export default forwardRef(function Comments( }); } else { setComments((prev) => { - console.log(prev, parent_id, id); + commentCountUpdateRef.current?.(prev.length - 1) return prev.filter((item) => item.id !== id); }); } diff --git a/src/game_pages/detail/index.tsx b/src/game_pages/detail/index.tsx index d2028db..4fe8c82 100644 --- a/src/game_pages/detail/index.tsx +++ b/src/game_pages/detail/index.tsx @@ -247,6 +247,7 @@ function isFull(counts) { // 底部操作栏 function StickyButton(props) { const { handleShare, handleJoinGame, detail, onStatusChange, handleAddComment, getCommentCount } = props; + const [commentCount, setCommentCount] = useState(0) const ntrpRef = useRef(null); const { id, price, user_action_status, match_status, start_time, end_time, is_organizer } = detail || {}; @@ -258,6 +259,12 @@ function StickyButton(props) { ntrpRef?.current?.show(); } + useEffect(() => { + getCommentCount?.((count) => { + setCommentCount(count) + }) + }, [getCommentCount]) + function generateTextAndAction( user_action_status: null | { [key: string]: boolean } ): undefined | { text: string | React.FC; action?: () => void; available?: boolean } { @@ -370,8 +377,6 @@ function StickyButton(props) { }; } - const commentCount = getCommentCount() - return ( <> @@ -1224,7 +1229,7 @@ function Index() { detail={detail} onStatusChange={onStatusChange} handleAddComment={() => { commentRef.current && commentRef.current.addComment() }} - getCommentCount={() => commentRef.current && commentRef.current.getCommentCount()} + getCommentCount={commentRef.current && commentRef.current.getCommentCount} /> {/* share popup */} {["refund", "progress", "expired"].includes(orderStatus) && (