如何在React state中存储多个拖放文件且保留历史状态？

报错原因 #

你遇到的类型报错是因为uploadFiles声明为数组类型any[]，但你调用setUploadFiles时传入了{ ...files, files }对象，类型不匹配导致报错。
如果直接写setUploadFiles(files)会覆盖之前的状态，是因为该写法直接用新拖入的文件替换了原有状态，没有保留历史数据。

解决代码 #

// 可将any[]优化为更精准的File[]，类型提示更友好
const [uploadFiles, setUploadFiles] = useState<File[]>([]);

const onDropHandler = async (e:React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    const newFiles = Object.values(e.dataTransfer.files);
    // 采用函数式状态更新，拼接历史文件和新上传的文件
    setUploadFiles(prevFiles => [...prevFiles, ...newFiles]);
};

可选优化 #

如果需要避免重复添加相同文件，可在拼接前增加去重逻辑：

setUploadFiles(prevFiles => {
  const existFileKeySet = new Set(prevFiles.map(f => `${f.name}_${f.lastModified}`));
  const filteredNewFiles = newFiles.filter(f => !existFileKeySet.has(`${f.name}_${f.lastModified}`));
  return [...prevFiles, ...filteredNewFiles];
});

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