React useRef数组无法通过索引访问单个元素问题求助

核心问题 #

你遇到的情况是浏览器console.log的引用类型快照特性导致的视觉误导：当你打印dropZones.current时，浏览器显示的是数组的实时状态（展开时才读取最新值），但你调用dropZones.current[0]时，数组其实还没被子组件的pushRef填充，或者数组内容存在重复/时序混乱的问题。

另外你当前的实现存在两个关键问题：

1. 用useState存储DOM ref是冗余操作，React的回调ref可以直接获取元素，无需额外状态。
2. 依赖useEffect触发pushRef的时机不可靠，且未处理组件重渲染时的重复添加问题。

方案1：用Map存储ref（推荐，更可靠） #

用item的唯一标识（比如item.id）作为键存储ref，避免索引混乱和重复添加，同时支持精准访问。

父组件Game修改：

export function Game() {
  // 用Map存储，键为item的唯一ID，值为对应DOM元素
  const dropZones = useRef(new Map());

  // 替换pushRef，处理元素挂载/卸载的情况
  function setDropZoneRef(el, itemId) {
    if (el) {
      dropZones.current.set(itemId, el);
    } else {
      // 元素卸载时从Map中移除
      dropZones.current.delete(itemId);
    }
  }

  return items.slice().sort((a, b) => a.idx - b.idx).map((item) => (
    <DropZone 
      key={item.id} // 用item的唯一ID做key，禁止用索引
      item={item} 
      setDropZoneRef={setDropZoneRef}
    />
  ))
}

子组件DropZone修改：

export function DropZone({ item, setDropZoneRef }) {
  // 直接用回调ref，无需useState和useEffect
  return (
    <div 
      className="drop p-1 pt-2 text-center" 
      ref={(el) => setDropZoneRef(el, item.id)}
    />
  )
}

访问元素的方式：

// 获取排序后的第一个item，再通过ID拿到对应的DOM元素
const firstItem = items.slice().sort((a, b) => a.idx - b.idx)[0];
const firstDropZone = dropZones.current.get(firstItem.id);

方案2：用数组存储ref（兼容你的原有逻辑） #

如果你坚持用数组存储，需要解决重复添加和时序问题：

父组件Game修改：

export function Game() {
  const dropZones = useRef([]);

  // 每次items变化时清空数组，避免重复添加
  useEffect(() => {
    dropZones.current = [];
  }, [items]);

  function pushRef(ref) {
    // 避免重复添加相同元素
    if (ref && !dropZones.current.includes(ref)) {
      dropZones.current.push(ref);
    }
  }

  return items.slice().sort((a, b) => a.idx - b.idx).map((item) => (
    <DropZone 
      key={item.id} // 用item唯一ID做key
      item={item} 
      pushRef={pushRef}
    />
  ))
}

子组件DropZone简化：

export function DropZone({ item, pushRef }) {
  return (
    <div 
      className="drop p-1 pt-2 text-center" 
      ref={(el) => el && pushRef(el)}
    />
  )
}

正确访问数组元素：

必须确保所有DropZone组件挂载完成后再访问，比如在父组件的useEffect中：

useEffect(() => {
  // 此时所有DropZone已挂载，数组已填充
  console.log(dropZones.current[0]);
}, [items]); // 依赖items，确保渲染完成后执行

内容的提问来源于stack exchange，提问作者mirja-t