Javascript 在react useState钩子中将对象推送到数组

我宣布反应状态如下

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

在函数中使用它们，如下所示

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

我正在尝试添加如下内容，但不起作用

selectedFiles.length === 0 ? setselectedFiles(files) : setselectedFiles(oldFiles => [...oldFiles,files])

---

但是它对我没有帮助。

您可能在上一个数组中使用相同的引用设置了选定的文件，这不会导致任何更改，因此请将其克隆到新数组（我通过扩展进行克隆）

函数handleaceptedfiles（文件）{
files.map（（文件）=>
对象。分配（文件{
预览：URL.createObjectURL（文件），
formattedSize:FormattBytes（file.size），
})
)
setselectedFiles（[…文件]）
}

您正在做什么

setselectedFiles（oldFiles=>[…oldFiles，files]）

将数组作为新元素添加到现有数组中 像这样的

let array = [1,2,3];
let array2 = [4,5,6];

let output= [...array,array2]
console.log(output) // [1,2,3,[4,5,6]]

// change the output which concat 2 arrays using spread 
output= [...array,...array2];

console.log(output) // [1,2,3,4,5,6]

那么你的解决方案呢 替换

借

---

这回答了你的问题吗？请附上一份报告，并清楚描述正在发生的事情。是的。。。使用

[…新集合（您的_数组）]

或者如果您正在处理对象数组，请使用

[…新集合（您的_数组.map（JSON.stringify））].map（JSON.parse）

。。。这不是最好的答案，尽管您将在数组中获得唯一的值。

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

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