在反應 useState 鈎子中將對象推送到數組

Question

我聲明如下反應狀態

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

但這對我沒有幫助。

Answer 1

您可能在前一個數組上設置了具有相同引用的setselectedFiles ，這不會導致任何更改，因此將其克隆到一個新數組（我通過傳播進行克隆）

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

Answer 2

你在做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]

所以對於你的解決方案替換

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

經過

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