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

【问题标题】：Create unique array while push Object to array in react useState hook在反应 useState 钩子中将对象推送到数组时创建唯一数组
【发布时间】：2020-12-15 23:01:01
【问题描述】：

我声明反应状态如下

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

【问题讨论】：

files 是否包含oldFiles 的元素，还是仅包含新元素？
只是新元素
您还应该提供文件元素的示例
只是新元素那么为什么还要担心删除重复文件呢？
在新元素中可能是他选择了相同的文件然后它会添加重复的文件

标签： javascript arrays reactjs multidimensional-array use-state

【解决方案1】：

您可以使用 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)
}

【讨论】：

【解决方案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));
}

【讨论】：