React JS中如何防止重复文件被添加至组件State？

问题场景 #

现有React文件上传组件，选择文件时重复文件会被重复添加至状态，导致页面显示重复条目。原组件代码如下：

export const Files = React.memo(() => {
  const [uploadFiles, setFiles] = React.useState([]);

  const handleFile = (event) => {
    const file = event.target.files;
    setFiles(uploadFiles.concat([...file]));
  };

  console.log(uploadFiles);

  return (
    <div>
      <input type="file" multiple onChange={handleFile} />
      {uploadFiles && uploadFiles?.map((f) => <div>{f.name}</div>)}
    </div>
  );
});

需求：添加文件至状态前做去重处理，避免重复文件被多次添加。

实现方案 #

核心逻辑是在新增文件时，对比现有状态中的文件，过滤掉已存在的条目。为了避免重名不同文件被误判，采用文件名+文件大小的组合作为去重判断依据，比单一文件名更可靠。

修改后的代码如下：

export const Files = React.memo(() => {
  const [uploadFiles, setFiles] = React.useState([]);

  const handleFile = (event) => {
    const newFiles = [...event.target.files];
    // 过滤掉已存在于现有列表的文件
    const uniqueNewFiles = newFiles.filter(newFile => {
      return !uploadFiles.some(existingFile => 
        existingFile.name === newFile.name && existingFile.size === newFile.size
      );
    });
    // 用函数式更新确保获取最新状态
    setFiles(prevFiles => [...prevFiles, ...uniqueNewFiles]);
  };

  console.log(uploadFiles);

  return (
    <div>
      <input type="file" multiple onChange={handleFile} />
      {uploadFiles.map((f, index) => (
        <div key={index}>{f.name}</div>
      ))}
    </div>
  );
});

关键修改说明 #

• 用filter+some组合实现去重：遍历新选文件，仅保留现有状态中不存在的条目
• 双维度判断去重：文件名+文件大小的组合，避免重名文件误判
• 函数式更新状态：确保获取最新的uploadFiles值，避免异步状态更新导致的错误
• 补充列表key：符合React列表渲染规范，消除控制台警告

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