我正在通过制作一个模拟的个人网站来学习如何使用reactjs。主页的目标设计是一个操纵杆，在拖动时，允许您选择下一页。有四个按钮，分别位于中央圆形gui的顶部、右侧、左侧和底部。
基本上，我的想法是：单击操纵杆，向选项拖动。如果您接近该选项，它会高亮显示该选项，如果您离该选项足够近，它会将您导航到该页面。
我用的是框架运动 drag 及 onDragStart / onDragEnd / onDrag 道具尝试并检测阻力的方向。基本上，我得到了被拖动元素的 clientX 及 clientY 位置字段（从 event 数据包由 onDrag 函数属性），并将其与拖动元素的原始属性进行比较 clientX 及 clientY 位置。如果x的变化大于y的变化，我知道最接近的选项在x轴上，我可以执行更多的计算来确定它是在左侧还是右侧。。。y轴也是如此。我知道这些计算工作正常，速度足够快：无需使用任何 [state, setState] 要将悬停效果分配给目标div，脚本将正确指示并记录它应该转到的正确“链接”。
问题是，一旦我尝试对react的代码使用相同的代码 useState 函数（有效地告诉相关组件使用悬停效果重新渲染，而不仅仅是控制台。记录方向），它不起作用。悬停效果会卡在屏幕上 about 页面，无论我尝试向哪个方向拖动操纵杆。
这里有一些代码来说明我在做什么。同样，我昨天开始学习react，所以如果你看到它们，请告诉我任何正确的做法或更有效的方法。

const linkPaths = {
    top: "about",
    right: "resume",
    bot: "projects",
    left: "bots",
};

const Home = () => {
    const [isHovering, setIsHovering] = useState(false);
    const [joystickIsClicked, setJoystickIsClicked] = useState(false);
    const [hoveredLink, setHoveredLink] = useState("");

    var draggingTowards = "";
    var prevDraggingTowards = "";

    var dragStartX, dragStartY;

    const joystickWidth = 90;
    const outerCircleWidth = 600;
    const innerCircleWidth = 550;

    return (
            <Wrapper>
                <Content>
                    <OuterCircle width={outerCircleWidth} isHovering={isHovering}> 
                        <InnerCircle
                            width={innerCircleWidth}
                            isHovering={isHovering}
                            joystickIsClicked={joystickIsClicked}
                        >
                            <JoystickContainer
                                layout
                                drag
                                dragElastic={0}
                                width={joystickWidth}
                                dragConstraints={{
                                    top: -innerCircleWidth / 4,
                                    left: -innerCircleWidth / 4,
                                    right: innerCircleWidth / 4,
                                    bottom: innerCircleWidth / 4,
                                }}
                                whileHover={{
                                    scale: 1.2,
                                    cursor: "pointer",
                                    backgroundImage:
                                        "linear-gradient(black, black), linear-gradient(to bottom right, cyan, magenta)",
                                }}
                                onHoverStart={() => {
                                    setIsHovering(true);
                                }}
                                onHoverEnd={() => {
                                    setIsHovering(false);
                                    setJoystickIsClicked(false);
                                }}
                                onTapStart={() => {
                                    setJoystickIsClicked(true);
                                }}
                                onTap={() => {
                                    setJoystickIsClicked(false);
                                    console.log("finished tap");
                                }}
                                onDragStart={(event, info) => {
                                    dragStartX = event.clientX;
                                    dragStartY = event.clientY;
                                    // console.log(`(${dragStartX}, ${dragStartY})`);
                                }}
                                onDragEnd={(event, info) => {
                                    // console.log(`(${event.clientX}, ${event.clientY})`);
                                }}
                                onDrag={(event, info) => {
                                    if (Math.abs(event.clientX - dragStartX) > Math.abs(event.clientY - dragStartY)) {
                                        // more movement in x direction
                                        if (event.clientX > dragStartX) {
                                            draggingTowards = linkPaths.right;
                                        } else {
                                            draggingTowards = linkPaths.left;
                                        }
                                    }
                                    //more movement in y direction
                                    else {
                                        if (event.clientY > dragStartY) draggingTowards = linkPaths.bot;
                                        else draggingTowards = linkPaths.top;
                                    }

                                    if (draggingTowards !== prevDraggingTowards) {
                                        // only update state function on a change of direction dragging
                                        setHoveredLink(draggingTowards);
                                        prevDraggingTowards = draggingTowards;
                                    }
                                    console.log(hoveredLink);
                                }}
                            </JoystickContainer>
                        </InnerCircle>
                    </OuterCircle>
                </Content>
            </Wrapper>

关于react中的有状态值和函数，是否有一些关键的东西我遗漏了？我想知道重新渲染道具是否会导致阻力问题，但如果是这样，我不确定如何继续。
效果可见的gui布局--拖动方向卡在“about”上
console.logs失败的悬停链接状态