动态useRef文件输入数组删除后引用不匹配问题

问题根源 #

你当前的实现中，pageNumber是动态变化的连贯页码（删除页面后后续页码会重置），但rawPageImages数组是按旧的pageNumber或映射index存储ref的。删除页面后，新渲染的Input使用了重置后的pageNumber，但rawPageImages里的条目仍保留旧的pageNumber，导致两者对应关系断裂。同时映射时直接用index覆盖ref数组的做法，在index移位时会进一步加剧不匹配。

解决方案 #

1. 给页面添加唯一不变标识（核心） #

给每个页面生成一个创建后永不改变的唯一ID（比如UUID），替代动态变化的pageNumber作为ref关联的标识。这样即使页码重置，也能通过唯一ID找到对应的ref。

示例页面结构：

const pages = [
  { id: 'uuid-1', pageNumber: 1, words: 50 },
  { id: 'uuid-2', pageNumber: 2, words: 30 },
];

2. 重构ref存储结构为对象 #

将rawPageImages从数组改为对象，用页面唯一ID作为键，存储对应的ref信息：

const rawPageImages = useRef({});

3. 修改Input的ref绑定逻辑 #

映射Input时，通过页面唯一ID绑定ref，确保每个Input始终对应正确的存储条目：

const allPages = pages.map((page) => {
  return (
    <div className="w-full cstm-flex-row gap-2" key={page.id}> {/* 必须用唯一ID作为key，避免React复用错误组件 */}
      <label className="cstm-bg-hover cursor-pointer" htmlFor={`filePage${page.pageNumber}`}>
        <input
          accept="image/*"
          type="file"
          className="hidden peer"
          formNoValidate
          name="pageImage"
          id={`filePage${page.pageNumber}`}
          onChange={(e) => fileFns.selectedPageImageViewer(page.pageNumber, e, props.setPages)}
          ref={(el) => {
            // 用唯一ID存储ref，同步当前的pageNumber
            rawPageImages.current[page.id] = { pageNumber: page.pageNumber, fileRef: el };
          }}
        />
        <BiImage className="scale-150 text-prmColor peer-checked" />
      </label>

      <p className="mr-auto">
        {page.words > 1 ? "Words" : "Word"}: {page.words}
      </p>

      <button onClick={() => props.deletePage(page.id)} type="button" className="cstm-bg-hover"> {/* 删除时传入唯一ID */}
        <AiFillDelete className="text-prmColor scale-150" />
      </button>
    </div>
  );
});

4. 更新删除函数 #

删除页面时，根据唯一ID移除对应的ref条目：

const deleteRawImagePage = (pageId) => {
  if (rawPageImages.current) {
    delete rawPageImages.current[pageId];
  }
};

5. 同步页码变化后的ref信息 #

当页码重置时（比如删除页面后），ref回调会自动更新存储条目中的pageNumber字段，确保ref信息与当前页面状态一致。

替代方案（不修改存储结构） #

如果不想改成对象存储，也可以在每次渲染时先同步ref数组与当前pages的对应关系：

// 映射前先过滤ref数组，只保留当前存在的页面
const validPageIds = pages.map(p => p.id);
props.rawPageImages.current = props.rawPageImages.current.filter(item => validPageIds.includes(item.id));

const allPages = pages.map((page) => {
  // 找到当前页面对应的ref条目，没有则新增
  let refItem = props.rawPageImages.current.find(item => item.id === page.id);
  if (!refItem) {
    refItem = { id: page.id, pageNumber: page.pageNumber, fileRef: null };
    props.rawPageImages.current.push(refItem);
  }

  return (
    <div className="w-full cstm-flex-row gap-2" key={page.id}>
      <label className="cstm-bg-hover cursor-pointer" htmlFor={`filePage${page.pageNumber}`}>
        <input
          // ...其他属性
          ref={(el) => refItem.fileRef = el}
        />
        {/* 其他元素 */}
      </label>
      {/* 其他元素 */}
    </div>
  );
});

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