替换数组首个元素时触发net::ERR_FILE_NOT_FOUND错误的解决求助

翻译后的错误信息 #

blob:http://localhost:3000/65ea67c6-4afb-473e-b36c-f22799082e69,blob:http://localhost:3000/7cb0ad60-316c-4896-8669-xxxx:1 请求 blob:http://localhost:3000/65ea67c6-4afb-473e-b36c-xxx,blob:http://localhost:3000/7cb0ad60-316c-4896-8669-xxx 失败：net::ERR_FILE_NOT_FOUND（文件未找到）

错误根源 #

1. 状态引用篡改：const copy = pics只是赋值了原数组的引用，没有创建新数组副本。直接修改copy[0]属于篡改React状态，会导致更新逻辑异常。
2. 数组嵌套错误：setPics([copy])把修改后的数组额外包裹了一层，最终状态变成二维数组。后续渲染时浏览器会把两个Blob URL拼接成无效地址，请求不存在的地址就触发了文件未找到错误。

修复后的代码 #

const changeMainpIC = (e) => {
  const pic = e.target.files[0];
  // 用扩展运算符创建原数组的浅拷贝，切断与原状态的引用关联
  const updatedPics = [...pics];
  updatedPics[0] = URL.createObjectURL(pic);
  // 直接设置新数组作为状态，避免嵌套
  setPics(updatedPics);
};

额外优化：避免内存泄漏 #

Blob URL会占用浏览器内存，长期不释放可能导致内存泄漏。建议在组件卸载或状态更新时释放旧的Blob URL：

import { useEffect } from 'react';

// 在组件中添加该副作用处理
useEffect(() => {
  return () => {
    pics.forEach(url => {
      if (url?.startsWith('blob:')) {
        URL.revokeObjectURL(url);
      }
    });
  };
}, [pics]);

内容的提问来源于stack exchange，提问作者Captai-N