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

Question

我正试图使用react konva创建一个动画来模拟队列数据结构，当我将其用作带有pop()和push()的堆栈时，代码可以正常工作，但当我使用shift()删除第一个元素时，队列中的下一个元素将与第一个元素一起从画布中取消渲染。我尝试过使用slice()，并手动将每个项目从旧队列循环到新队列，但似乎什么都不起作用。

我使用useEffect和useRef来跟踪队列中的更改，以将每个矩形的ref存储在数组中。

排队动画运行良好，并按预期运行

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在同一索引处重新附加到新元素。