在反应 useState 钩子中将对象推送到数组时创建唯一的数组

Question

I am declaring react state as below

const [selectedFiles, setselectedFiles] = useState([]);

Using them in function as below

function handleAcceptedFiles(files) {
    files.map((file) =>
      Object.assign(file, {
        preview: URL.createObjectURL(file),
        formattedSize: file.size,
      })
    );
    selectedFiles.length === 0 ? setselectedFiles(files) : setselectedFiles(oldFiles => [...oldFiles,...files])
  }

At this point how can we add only new file and remove duplicate file

setselectedFiles(oldFiles => [...oldFiles,...files])

Answer 1

You could create a lookup object with key-value pairs of filePreview-file and grab values from that

function handleAcceptedFiles(files) {
  const pendingFiles = files.map(file =>
    Object.assign(file, {
      preview: URL.createObjectURL(file),
      formattedSize: file.size
    })
  )

  const dedupFiles = Object.values(
    [...selectedFiles, ...pendingFiles].reduce((lookup, file) => {
      if (lookup[file.name] === undefined) {
        lookup[file.name] = file
      }
      return lookup
    }, {})
  )

  setselectedFiles(dedupFiles)
}

Answer 2

Maybe this is what you need?

function handleAcceptedFiles(files) {
  // Map over the current selection of files, generate required fields
  const newFiles = files.map(file => {
    return Object.assign(file, {
      preview: URL.createObjectURL(file),
      formattedSize: file.size,
    });
  });

  // Find non-duplicate entries in previously selected files
  const nonDupFiles = selectedFiles.filter(oldFile => {
    const index = newFiles.findIndex(newFile => newFile.preview === oldFile.preview);
    return index === -1;  // index -1 => file wasn't found => non duplicate
  });

  // Concat of new files and non-dup files is what we need in state
  setselectedFiles(newFiles.concat(nonDupFiles));
}