javascript - 加载显示在 react 中映射项目的所有按钮上

Question

我正在使用 array.map() 映射评论数组的评论和回复。

  {data.comments?.map((comment) => (
        <CommentsSection
          user={user}
          token={token}
          thread={data}
          key={comment._id}
          comment={comment}
          threadRefetch={threadRefetch} />
      ))}

加载来自CommentSection组件中的react-query:

const {
   data: commentRes,
   refetch: commentR_Refetch,
   isFetching: Loading,

 } = useQuery(['/comment-reply-thread', thread._id, user?.username, token],
   () => comment_reply_thread(
     user?.username, thread._id, comment._id, token, crMessage
   )}
 });

这里是带有按钮的输入字段代码，按钮转换为加载

 <FormControl>
      <InputGroup size='md'>
        <Input value={crMessage} onChange={(e) => setCrMessage(e.target.value)} placeholder='Reply...' />
        <InputRightElement >
          <SendButton isLoading={Loading} onClick={() => commentR_Refetch()} aria-label='' />
        </InputRightElement>
      </InputGroup>
    </FormControl>

这是图片

如何仅加载单击的按钮。有什么解决办法吗？

Answer 1

1. 发送回复可能应该是一个突变，而不是一个查询。
2. 您在 queryFn 中使用 comment._id，但它不是 queryKey 的一部分。这可能就是共享状态的原因 - 因为它们都使用“相同”查询。