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

Question

我声明反应状态如下

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

在下面的函数中使用它们

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])
  }

此时我们如何只添加新文件并删除重复文件

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

Answer 1

您可以使用 key-value 对 filePreview-file 创建一个查找对象，并从中获取 values

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

也许这就是您所需要的？

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));
}

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

Create unique array while push Object to array in react useState hook

javascript

arrays

multidimensional-array

reactjs

use-state