Блог

Я использую react-router-dom.
Я использую map для преобразования полученных данных. Когда одна из кнопок нажата, я хочу получить данные, используя идентификатор кнопки, и передать полученные данные в ссылку to={} ссылки. Однако при нажатии кнопки ссылка перемещается до получения данных. Это приведет к ошибке.
Я не хочу, чтобы ссылка переходила на to= {}, даже если она нажата до получения данных.

 import React from 'react';
import styled from 'styled-components';
import {useGroupQuery, useClientAllQuery} from 'api';
import {Popover} from 'antd';
import {Link} from 'react-router-dom';

const PopverBox = () => {

  const {data: {users: = {}} = {}} =
    useClientAllQuery({
      variables: {
        search: {
          status: 'open',
        },
      },
    });

  const [id, setId] = React.useState(null);
  const {data: {group: = null} = {}} = useGroupQuery({
    variables: {uuid: id},
    skip: !id,
  });

  const Click = (id: string) => {
    setId(id);
  };
  return (
    <Popover
      trigger="hover"
      placement="bottom"
      content={
        true amp;amp; (
          <PopoverContent>
            <PopoverItems>
              {users.map((user) => {
                  return (
                    <PopoverItem key={user.id}>
                      <Link
                        onClick={() => Click(user.uuid)}
                        to={`user/${group.uuid}`}>
                        {user.name}
                      </Link>
                    </PopoverItem>
                  );
              })}
            </PopoverItems>
          </PopoverContent>
        )
      }>
    </Popover>
  );
};