上传列表添加新数据时旧数据丢失，如何实现数据累加？

你的上传列表旧数据被移除的核心原因是useState的异步更新特性：当前代码直接使用fileList的当前值来更新状态，但React的状态更新是异步的，当连续触发上传操作时，后续更新可能会基于未更新的旧状态，导致之前的数据被覆盖。另外，代码中未处理file为undefined的边界情况，可能导致addedFiles为undefined，引发状态更新异常。

1. 使用函数式更新状态 #

将直接依赖当前fileList的更新方式，改为传入函数获取最新状态，确保每次更新都基于最新的文件列表：

2. 处理边界情况 #

给addedFiles添加默认空数组，避免file为undefined时引发展开错误；同时在forEach前添加可选链，防止调用空值的方法。

const [fileList, setFileList] = useState<AddedFile[]>([]);

const beginUpload = (file: File[]) => {
    const addedFiles = (file
      ?.filter((item) => item !== null)
      .map((item): AddedFile => {
        return {
          title: item.name || '',
          fileName: item.name || '',
        };
      })) || [];

    // 函数式更新，基于最新的prevFileList生成新列表
    setFileList(prevFileList => [...addedFiles, ...prevFileList]);

    file?.forEach((item: File) => {
      onUpload(item, {
        title: item.name || '',
        fileName: item.name || '',
      }).catch((err) => {
        console.error(err);
      });
    });
  }

额外说明 #

• 如果希望新上传的文件追加到列表末尾（而非开头），只需将状态更新的顺序调换：

  setFileList(prevFileList => [...prevFileList, ...addedFiles]);
  

• 代码中移除了多余的if (item === null)判断，因为前面的filter已经过滤掉了null值，不会进入这个分支。

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