React-Konva模拟队列时shift()致相邻矩形误删问题求助

核心问题 #

1. 用index作为React元素key：调用shift()移除队首后，原第二个元素的index变为0，React的diff算法会误判这个元素是被移除的队首，导致它被错误卸载。
2. 单个useRef存储多元素引用：你用单个rectRef存所有矩形引用，最终rectRef.current只会指向最后一个渲染的矩形，导致引用混乱。
3. 出队数组更新错误：animateOldBlock里array = [...queueArray]没有正确移除队首元素，应该基于当前localQueueArray做切片处理。

修复步骤 #

1. 给队列元素添加唯一ID #

修改队列元素结构，新增唯一标识：

interface QueueType {
  id: string; // 新增唯一ID
  posX: number;
  posY: number;
  height: number;
  width: number;
  color: string;
}

入队时生成唯一ID（可用crypto.randomUUID()或自增序号）：

const enqueue = () => {
  const newItem: QueueType = {
    id: crypto.randomUUID(),
    posX: // 你的位置计算逻辑,
    posY: // 你的位置计算逻辑,
    height: 50,
    width: 100,
    color: '#2ecc71'
  };
  setLocalQueueArray(prev => [...prev, newItem]);
  setEnqueueState(prev => !prev);
};

2. 用数组形式的useRef存储矩形引用 #

替换单个rectRef为数组ref：

const rectRefs = useRef<(Konva.Rect | null)[]>([]);

渲染时通过索引绑定ref，并用唯一ID做key：

{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={object.id} // 用唯一ID作为key
      ref={el => rectRefs.current[index] = el}
    />
  )
})}

3. 修正入队动画逻辑 #

更新animateNewBlock，用数组ref获取对应元素：

const animateNewBlock = () => {
  const lastIndex = localQueueArray.length - 1;
  const rect = localQueueArray[lastIndex];
  const rectEl = rectRefs.current[lastIndex];
  
  if (rectEl) {
    setHeadQueue(prev => [...prev, rectEl]);
    rectEl.to({ x: rect.posX });
  }
  setQueueArrayCount(prev => prev + 1);
};

4. 修正出队动画逻辑 #

确保正确移除队首元素，同步更新状态和ref数组：

const animateOldBlock = () => {
  const [removedRect, ...remainingRefs] = headQueue;
  const remainingQueue = localQueueArray.slice(1); // 移除队首元素

  removedRect?.to({ x: queueCanvasWidth + 200 });

  setTimeout(() => {
    setQueueArrayCount(prev => prev - 1);
    setLocalQueueArray(remainingQueue);
    setHeadQueue(remainingRefs);
    rectRefs.current = rectRefs.current.slice(1); // 同步更新ref数组
  }, 500);
};

5. 优化监听依赖（可选） #

添加必要依赖，避免不必要的触发：

useEffect(() => {
  if (enqueueState) {
    setEnqueueState(prev => !prev);
    animateNewBlock();
  }
}, [enqueueState, localQueueArray.length]);

useEffect(() => {
  if (dequeueState) {
    setDequeueState(prev => !prev);
    animateOldBlock();
  }
}, [dequeueState, localQueueArray.length]);

关键说明 #

• 用唯一ID做key是解决列表元素错误卸载的核心，确保React能准确识别每个元素的身份。
• 数组ref可以精准存储每个矩形的引用，避免单个ref被覆盖的问题。
• 出队时必须基于当前localQueueArray生成新数组，保证状态更新的准确性。

内容的提问来源于stack exchange，提问作者NaijaKyojin