React映射评论组件中所有按钮均显示加载，如何仅让点击按钮触发加载？

问题根源是所有CommentsSection组件的useQuery使用了相同的查询键（queryKey），导致触发任意一个组件的refetch时，所有同键的查询都会进入加载状态。

具体修改步骤： #

1. 给每个评论的查询添加唯一标识
   在useQuery的queryKey里加入当前评论的comment._id，让每个评论的回复查询拥有独立的键：

   const {
     data: commentRes,
     refetch: commentR_Refetch,
     isFetching: Loading,
   } = useQuery(
     // 新增comment._id，确保每个查询键唯一
     ['/comment-reply-thread', thread._id, user?.username, token, comment._id],
     () => comment_reply_thread(
       user?.username, thread._id, comment._id, token, crMessage
     )
   );
   

2. 优化：用useMutation处理提交操作（可选但更合理）
   从代码逻辑看，你是通过点击按钮触发回复提交，这种写操作更适合用react-query的useMutation，而不是useQuery。这样能彻底避免查询键冲突的问题，同时符合react-query的设计规范：

   // 替换原来的useQuery
   const { mutate: submitReply, isLoading: Loading } = useMutation(
     () => comment_reply_thread(
       user?.username, thread._id, comment._id, token, crMessage
     ),
     {
       // 提交成功后可以触发父组件的列表刷新
       onSuccess: () => threadRefetch()
     }
   );
   
   // 按钮点击事件改成调用submitReply
   <SendButton isLoading={Loading} onClick={submitReply} aria-label='' />
   

修改完成后，每个评论的按钮加载状态就只会和自身的提交/查询操作绑定，不会再出现全部按钮同时加载的情况。

内容的提问来源于stack exchange，提问作者Usama