React-Konva 动画在使用 shift() 时取消渲染下一个矩形

Question

我正在尝试使用react-konva创建一个动画来模拟队列数据结构，当我将它用作pop()和push()的堆栈时，代码按预期工作，但是当我使用shift()删除第一个元素时队列中的下一个元素与第一个元素一起从画布中取消渲染。我尝试使用slice() 并手动将旧队列中的每个项目循环到新队列中，但似乎没有任何效果。

我使用useEffect 和useRef 将每个矩形的引用存储在数组中来跟踪队列中的变化。

入队动画工作正常并按预期运行

  useEffect(() => {
    if (enqueueState) {
        setEnqueueState(prevState => !prevState)
        animateNewBlock()
    };
}, [enqueueState])    

const animateNewBlock = () => {
    let rect = localQueueArray[localQueueArray.length - 1];
    let array = headQueue;
    if (rectRef.current !== null) array.push(rectRef.current);
    setHeadQueue(array);
    rectRef.current?.to({
        x: rect.posX
    })
    setQueueArrayCount(prevState => (prevState + 1));
}

问题是出队动画，它取消渲染两个矩形而不是一个

    useEffect(() => {
    if (dequeueState) {
        setDequeueState(prevState => !prevState)
        animateOldBlock()
    };
}, [dequeueState])

const animateOldBlock = () => {
    let newHead = [...headQueue]
    let rectRef = newHead.shift();
    let array = [...queueArray]
    rectRef?.to({
        x: (queueCanvasWidth + 200)
    })
    setTimeout(() => {
        setQueueArrayCount(prevState => (prevState - 1));
        setLocalQueueArray(array)
        setHeadQueue(newHead)
    }, 500)
}

这是矩形在页面上呈现的方式

<div className={`canvas-container ${canvasTheme}`} ref={canvasRef}>
            <Stage width={canvasRef.current?.clientWidth} height={canvasRef.current?.clientHeight}>
                {(localQueueArray.length > 0) && <Layer>
                    <Text
                        x={headTagPosX}
                        y={headTagPosY}
                        text={"Head"}
                        fontSize={20}
                        fontStyle="bold"
                        fill={rectColor}
                        ref={textRef}
                    />
                    {localQueueArray.map((object: QueueType, index: number) => {
                        return (
                            <Rect
                                x={-200}
                                y={object.posY}
                                height={object.height}
                                width={object.width}
                                fill={object.color}
                                strokeWidth={1}
                                key={index}
                                ref={rectRef}
                            />
                        )
                    })}
                </Layer>}
            </Stage>
        </div>

当您用于模拟堆栈时，上述系统可以工作。

Answer 1

问题是使用数组索引的键，有人向我解释了 ref 重新附加到同一索引处的新元素。